A Beginner's Guide to CSS | Part One - Laying the foundations
Welcome to part one of A Beginner's Guide to CSS (previously titled CSS 101 - A Beginner's Guide to CSS). This series will take you through CSS from the ground up, developing your knowledge progressively until you're able to understand and use CSS in a (hopefully) competent fashion.
In part one, I'll explain what CSS is and we'll deconstruct a basic example so you can see how CSS works.
Cascading Style Sheets
CSS stands for Cascading Style Sheets and is used to control the appearance of web pages. You may have heard of HTML (HyperText Markup Language) and XHTML (eXtensible HyperText Markup Language). These are known as markup languages and they contain elements (also known as tags) that can be used to create web pages. It is the job of CSS to style these elements, thus resulting in what you see on the screen in front of you.
(Don't worry if you don't know anything about HTML or XHTML because I will cover both these topics as we progress through the series.)
Breaking it down
CSS works by applying styles to specific elements of a web page. It does this in blocks of code called rules or rule-sets, which target the element(s) in question, via objects called selectors.
Let's have a look at what comprises a rule.
In the diagram above, our rule is everything within the red box and can be broken down, as follows:
- The selector - This is what you use to target elements for styling. The selector includes everything up to, but not including, the first curly brace. In our case, we want to target the
- The declaration block - Unlike what I wrote in the previous revision, when I was suffering caffeine withdrawal, the declaration block starts with the first curly brace and ends with the last curly brace. This is where your styling instructions go, in other words, your declarations.
- The declarations - The declarations are property-value pairs separated by a semicolon. They determine which CSS properties and their corresponding values to apply to a given element. In our example, we have two declarations (
color:red) which give our
bodytag a blue background and red text.
Where do I put CSS?
There are three places you can put your CSS:
- In a file called a stylesheet — these are known as external styles.
- Between the
styletags, in the
headof your document — these are known as embedded styles.
- Directly on an element, via the
styleattribute — these are known as inline styles.
You ideally want to store your CSS in a stylesheet, which is a document with a .css extension. Your stylesheet(s) should ideally be saved in a directory called styles or css, as it's good practice to store your files in folders which describe their purpose.
You can then include your stylesheet(s) between the
head tags of your document, like so:
<head> <link href="styles/my-ultra-cool-styles.css" rel="stylesheet" media="all"> </head>
<head> <link href="styles/my-ultra-cool-styles.css" rel="stylesheet" media="all" /> </head>
rel="stylesheet" attribute is necessary as it tells the
link tag that we're importing a stylesheet. Without it, your stylesheet will not be loaded. The
media="all" means that this stylesheet is applicable for all media, i.e., your computer screen, tablet, mobile phone and when being printed. You can specify different stylesheets or styles for different devices and different circumstances so, for example, you can create a stylesheet for when a page is printed, or when your site is viewed on a mobile phone or at a specific resolution. This is called responsive design, as you are creating a website that responds to the browsing environment of your user, and is accomplished using media queries, which we will cover later, as the topic is beyond the scope of this tutorial. The only media attributes you are likely to need now are the following:
- all - all devices, resolutions, colours etc
- screen - all devices that use a screen
- print - for printed output
Sometimes you may want to create CSS rules that will only ever apply to elements on a specific page and, crucially, won't be reused across the rest of your site. In this instance, you can embed your styles directly on the page.
Embedded styles are placed between the
head tags in your document, like so:
<head> <style media="all" type="text/css"> ... some styles ... </style> </head>
Note, you don't need the
rel="stylesheet" for embedded styles.
The only time you should really use embedded styles is when you have certain elements that only occur on one page, and it isn't possible for you to create a stylesheet for them.
Something to keep in mind is that embedded styles take priority over external styles. If you are targeting a specific element in your stylesheet, and then you target that same element within your embedded styles, the embedded styles will override the external styles. If this is a problem for you and there isn't an alternative, you can easily override styles, which we will be talking about in more depth in Part Four - The CSS Order of Precedence.
Inline styles are the styles applied directly to an element via the
style attribute, as such:
<div style="font-weight:bold; color:orange; padding:8px"> ... some text ... </div>
I tend to avoid inline styles because they can get out of hand and they're easy to forget. You add them to an element, decide to change the element's appearance at some point in the future, change it in the stylesheet and your styles don't take effect because the inline styles — which, by then you've forgotten all about — take priority. It's much neater and more manageable to use external stylesheets. That way, you know where everything is and your CSS is easier to modify later on down the line.
Just so you're aware, inline styles take priority over embedded and external styles ... but this isn't an issue you will encounter often, because you're going to try not to use inline styles ;).
Who is responsible for CSS?
This is important and I've encountered a startling amount of web designers who have very little knowledge on the background of CSS. If you don't know why a certain mechanism behaves the way it does, you'll be in a difficult position to fix any problems that arise. And you won't know this stuff unless you know more about the organisation I'm about to mention. So, without further ado ... CSS is maintained by the World Wide Web Consortium, W3C for short. The W3C are responsible for creating and enforcing standards for the web and they write the "specifications" which define how CSS works (as well as HTML, XHTML and XML, to name a few). Without the W3C, the web would be a very different place.
Which version of CSS do we use?
The current version of CSS is CSS Level 3, or CSS3 for short. CSS3 differs from its predecessors in that it comprises the specification from the last version of CSS, which is Level 2 Revision 1, or CSS2.1 for short, and builds upon it in a modular fashion. This is as opposed to completely replacing CSS2.1.
CSS3 offers an array of helpful new properties, such as multiple backgrounds for an individual element, drop shadow effects, the ability to set a border radius. Many of these shiny new properties are now widely available, although weren't at the time I started writing this series, so we will be taking a look at them as we progress forwards.
Some useful lingo
In this series, I will use some terms that may or may not be familiar to you, several of which are highlighted below:
- Assistive technology - a piece of software that improves the browsing experience for users with disabilities; one such device is known as a screen reader.
- Screen reader - a device that speaks the text of web pages.
- Tag - an (X)HTML element, such as the
- User Agent - a device used to browse the web, e.g., a browser.
- Viewport - The visible region on screen.
In this chapter, we learnt that CSS is made up of property-value pairs called declarations, nested inside a declaration block, which sit inside a rule or rule-set. Easy-peasy!
We also learnt that it is good practice to place your CSS in external stylesheets as this results in more manageable code.
In the next chapter A Beginner's Guide to CSS | Part Two - The Selectors, we will look at the CSS selectors and how to use them.