CSS 101 | Part One - Laying the foundations
Published on March 6th 2010.
Updated on March 21st 2010.
This is part one of CSS 101, where we will be learning about what makes up a CSS style; deconstructing an example into its basic constituents so you can see how it works.
Cascading Stylesheets
Before we begin, a quick preamble into what exactly CSS is. CSS stands for Cascading Stylesheets and is used to control the appearance of a web page, using CSS rules which can be placed in three locations:
- As inline styles - styles applied directly to an element
- As embedded styles - styles placed between the
styletags - As external styles - styles placed within a stylesheet
Before I explain these three methids of writing CSS, let's look at what constitutes a CSS declaration.
Breaking it down
Here's a diagram of what makes up a CSS style.
A diagram which consists of a rule-set and declarations - which contain a selector and property-value pairs.
The above diagram might look a little convoluted, but the beauty of CSS is that it's easy to write. Each declaration (consisting of a property-value pair) is a simple sentence, terminated by a semi-colon; each rule-set consists of a selector and two parenthesis which contain your declarations. It all fits together nicely, and you'll get the hang of it in no time.
We use rules like the above when writing CSS. That's all a declaration is: a collection of rules which describe how the page is rendered.
How do we include CSS in our pages?
When you write your styles you (ideally) place them in a CSS document: a document with a .css extension, which should go in a directory called styles or css - it doesn't have to, but it's good practice to store your files in folders which describe their purpose. It makes it easier to find things, and gives your content a neat layout.
Why did I say ideally? Because, sometimes you may write a little style that only applies to one item on one page and may not fit in with the rest of your site, so you sneakily add it into your page as an embedded style (don't worry, more about that later!).
The external stylseheet
When using external stylesheets, you include them between the head tags of your document, like so:
<head>
<link href="styles/my-ultra-cool-styles.css" rel="stylesheet" media="all" />
</head>
The rel="stylesheet" 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. If you want to specify a different stylesheet for when the page is printed, you would create two stylesheets, one with a media="screen" for the web, and another with a media="print" for the printer.
Embedded styles
Embedded styles are placed between the head tags in your document, like so:
<head>
<style media="all">
... 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 don't merit a place in your stylesheet. Take my tutorials section, I place all of the styles for my demonstration code inside the actual tutorial pages, as embedded styles. This code will not appear anywhere else on my site and is utterly specific to the page it is on.
Just to keep in mind, embedded styles take priority over external styles. If you are targeting a specific item in your stylesheet, and then you target that same item within your embedded styles, the embedded styles will override the external styles. You may think, well surely that's a useful application of embedded styles? But not really. You can easily override styles in your external stylesheets, which is favourable to using embedded styles...in fact, we will be talking about this in more depth in part four.
Inline styles
I initially didn't mention inline styles in this tutorial, because I think they can encourage sloppy coding, but I revised the tutorial, deciding you might as well know what they are, even if you never use them.
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 so easily get out of hand and they're easy to forget. You add them to an element, decide to change the element, change it in the styhesleet and your styles don't take effect because the inline styles take priority over all other styles. It's much neater and more manageable to use external stylesheets. That way, you know where everything is and you only alter your CSS once.
Conclusion
In this chapter, we learnt that CSS is made up of property-value pairs, nested inside rules or rule-sets, which sit inside a declaration. Easy-peasy!
We also learnt that it is good practice to place your CSS in external stylesheets as this results in more maniagable code.
In the next chapter CSS 101 | Part Two - The Selectors, we will look at the CSS selectors and how to use them.
