A Gentle Introduction to Cascading Style Sheets, aka CSS

Someone from the HTML Writer's Guild -basics mailing list asked me to explain Cascading Style Sheets (also known as CSS) to them. What follows is the e-mail I sent in reply...

The Reply

OK. HTML is a language that has evolved, just as many things evolve. It has adapted and grown with every new version. At the moment we are at version 4. Website designers often say "I wish I could do X with HTML." And so later versions of HTML incorporate tags that allow designers to do X.

This is how it adapts to meet the needs of the people that use it to make websites.

This is what happened with controlling the appearance of webpages. Designers said "I wish I could control the way my text looked on everybody else's computer."

The Joy of font

With the <font> tag you could dictate what font-face, what colour and what size the text was displayed in.

The trouble is, that kind of goes against the original mandate for HTML. HTML was created to define the structure of a document; not to define how it should be displayed. That's why the first tags created told a browser where a paragraph started and finished, which bits of text should be displayed as headings, and so on. It wasn't the intention of the original creators of HTML to allow webpage designers to control the ultimate appearance of the page. That was meant to be left up to the browser.

But, designers did want that level of control, and that's how the <font> tag came into existance.

And so everyone used the <font> tag. And used it... and used it... and used it... and used it.

Pretty soon, every page had become littered with font tags, all changing the face, size and colour of text. You could double the size of a page (in terms of Kb) by just trying to get the appearance you wanted.

fontus Interruptus

So the people who control which direction HTML goes in, the World Wide Web Consortium, decided that in the next version of HTML we should have a different way of controlling the appearance of text in web pages. In part, this was an attempt to get HTML back to performing it's original task - telling a browser how a document is structured.

But, because they knew people still wanted to be able to control how text appeared on a page, they had to think of a way of doing it without the <font> tag.

New Kid On The Block

Imagine a web page that has no <font> tags in it. It would look pretty boring, wouldn't it?

OK, now imagine you wanted to tell the browser "Every time you see text in a paragraph, I want you to make it a sans-serif font, medium sized and green". Using font tags, you'd have to surround paragraph text with

<p><font face="Arial, Helvetica, sans-serif" size="3" color="#00ff00">large chunk of paragraph text here</font></p>

And, you'd have to put that code wherever paragraph text had been changed to something different and you wanted it to go back to sans-serif, green and medium-sized again.

But, if we used Style Sheets to control the way the browser displays text, you would only have to tell the browser "every time you see text in a paragraph, I want you to make it Arial, medium sized and green" once.

So now, whenever you write text in a paragraph (by enclosing it by <p> and </p> tags), it will be in Arial, medium-sized, and green. And every bit of text within <p> tags will appear like that.

It's fairly easy to understand the way it works. The first thing you type (here, it's the letter P) is called the selector. And the bit after it, the part contained within curly brackets, is called the declaration.

The declaration says "every time you see a bit of text within P tags, make sure the font is Arial, or if they don't have that font, make it Helvetica, and if they don't have that font just make it the default sans-serif font. Make sure the size of it is medium, and make the colour of it green."

The declaration bit is composed of attribute-value pairs. It's not a million miles away from the way you do it with <font> tags already. The only real difference is that you put font-family instead of FACE, font-size instead of SIZE, and color stays the same. After each attribute (the first bit) you put a colon, then you put the value, and after that you finish with a semi-colon. Then, if you want, you can put another attribute-value pair.

(The way you write it on the page doesn't matter, BTW. I do it the way you can see here because I find it makes it easier to read, but you can write it all on one long line if you want).

font-family
font-style ("normal", "italic" or "oblique")
font-weight ("normal" or "bold")
font-size

color
background-color
background-image

word-spacing
letter-spacing
text-decoration ("none" for removing link underlining)
text-transform ("capitalize", "uppercase" or "lowercase")
text-align ("left", "center", "right" or "justify")
text-indent
line-height

And the great thing is you can do the same with every other tag as well. If you want to make sure every level 1 heading is displayed in a serif font, red and extra-large, just below the closing curly bracket, you could write:

h1 {
   font-family: "Times New Roman", Times, serif;
   font-size: x-large;
   color: #FF0000; }

This would make every level 1 heading appear in a serif font, sized x-large and red.

(BTW, Times New Roman is in quotation marks because the name of the font is more than just one word. It's advisable to do this... or so clever people have told me ;-)

<h1>A level 1 heading here</h1>

<p>Here is the first paragraph, and it goes on and on but that's just a load of rubbish text to pad out this bit here</p>

<h1>A second level 1 heading</h1>

<p>Here is more paragraph text that just rambles on and on with no apparent end in site, just like an interminable droning monologue</p>

<h1>Yet another big heading here</h1>

<p>Oh Lord where will this miserable dirge end please stop it now, ahh I think I see the end in sight, at last thank heavens here it is hoorah</p>

Using <font> tags, you would have to tell the browser how to display the headings and paragraphs every time. With CSS, you just tell it the rules once. And if the browser understands CSS (and the new ones do), it will obey.

That's because older browsers don't understand CSS (the <style> tag), and without it will happily write

P { font-family, etc...

So now, browsers that don't understand the <style> tag won't write out the P {font-family: stuff because it's in a comment tag, but browsers that do understand CSS also know that they should ignore the comment tag that comes between the 2 <style> tags.

Well, Cascading Style Sheets are a part of HTML. CSS is not different to HTML, it's just a new and different way of controlling the appearance of elements on a page. It helps to get the bits of code that define the structure and the appearance of information apart.

And CSS isn't limited to formatting text, either. You can also use it to position other page elements, such as images, or make them vanish or appear on cue. And when you combine CSS commands with a scripting language, such as JavaScript, you can produce some great dynamic effects (this is what is meant by "dynamicHTML").

However, right now support for these advanced features is a little patchy, so you can't afford to create your website using only these techniques, but over time, as more people start to use CSS-compatible browsers, they will become an increasingly important part of page design.

So, you might say "Great! I'm going to stop using the font tag and control all my pages with CSS." Well, you could. And that wouldn't be a bad idea. In fact, it's a pretty good idea. But, people who use Netscape Navigator 3 to view your pages won't see your text with all your new-fangled, fancy CSS formatting.

Because NN 3 doesn't understand CSS. NN 4 does. IE 3 understands the basics, IE 4 understands a goodish chunk of it and IE 5 understands the most so far.

Well, the CSS1 specification. It's a document that says "in the future, we'd like to be able to control how our webpages appear by using all these CSS commands..." and then there is a big long list of commands. How much a browser understands of that specification is upto the people who make the browser.

Plus, CSS2 has now been released. CSS2 adds new commands to the set of commands in CSS1, just as HTML4 added tags to the range of tags that already existed.

So, I either use font tags or use CSS and know that my pages will look bad in NN3?

Well, that's one way of looking at it. You can use font tags and CSS (by writing HTML 4 Transitional). The browsers that understand CSS will use those commands, and the browsers that don't understand CSS will at least understand the <font> tags. So, you've pages look groovy in all browsers.

At the moment, if you want everyone to see your pages the same, that's what you've got to do. Or, you could say "To hell with NN3 users" and just use CSS to control the appearance of your page.

It means it ain't going to be around for long. Things move on, people progress, and so does HTML. It's a way of saying "Today's browsers might listen to <font>, but don't guarantee that tomorrow's will."

If I need to learn CSS, how do I go about starting from the ground and working up to become familiar enough with it to be able to actually learn?

Well, hopefully what I've told you already is enough to give you a gentle introduction to CSS. You probably understand the basics now. It really doesn't get much more complicated that this.

However, there are 3 different ways in which you can use CSS. There are external style sheets, embedded style sheets and inline style sheets.

External

Imagine having a site with 50 pages, and you want them all to have the same appearance. You can do that by writing the line

in the <head>er of each file. Then, you just have a basic text file, change the extension to .css, and put in it all your CSS formatting, just as I've put at the top of this page. Then, because of the <link> tag you've put in all the pages, every page will use that CSS file to determine how the text looks. All the pages obtain their CSS formatting information from your external style sheet.

So, if you want to change the text-colour from black to blue on 50 pages, all you do is alter one line in the file mystylesheet.css, and whamo! - all 50 pages change.

The appearance of this page is controlled by the style sheet at /css/thenetprofits.css (BTW, if you click on that link and you're asked which application to use to view the style sheet, choose either Notepad or your favourite text editor).

If I alter any of the commands in that style sheet, the look of this page would change. But, because it's an external style sheet, it's also controlling the appearance of other pages on this site. For example, take a look at this ColdFusion Setup Guide and see how similar it looks. Because they both use the same external style sheet, if I alter that style sheet, both pages would change.

Embedded

An embedded style sheet is like the one you've made here. It goes in between the <head> tags of your webpage and controls the appearance of just the page that it's in.

Inline

And inline style sheets aren't really sheets at all, but just individual commands to format a small section of text.

For example, say your paragraphs are Arial and red. If you just want one paragraph to be blue instead, you would write

<p>This text is red and Arial</p>

<p style="color: #0000FF; ">Now all this paragraph is blue and still Arial</p>

<p>And now we are back to red again</p>

CSS Resources

Start off with http://www.htmlgoodies.com/. HTML Goodies is written by Joe Burns, and he is an absolute God amongst writers. He has a very conversational style that is more like listening to him give a talk. And he's funny. Check out his section on CSS (I think you have to click the Tutorials link on the left, and then scroll down the page to find the CSS link).




	« first webpage
	A Gentle Introduction to Cascading Style Sheets, aka CSS Someone from the HTML Writer's Guild -basics mailing list asked me to explain Cascading Style Sheets (also known as CSS) to them. What follows is the e-mail I sent in reply... The Reply Why do I need to learn CSS as opposed to sticking with HTML? OK. HTML is a language that has evolved, just as many things evolve. It has adapted and grown with every new version. At the moment we are at version 4. Website designers often say "I wish I could do X with HTML." And so later versions of HTML incorporate tags that allow designers to do X. This is how it adapts to meet the needs of the people that use it to make websites. This is what happened with controlling the appearance of webpages. Designers said "I wish I could control the way my text looked on everybody else's computer." And so the <font> tag was born. The Joy of font With the <font> tag you could dictate what font-face, what colour and what size the text was displayed in. The trouble is, that kind of goes against the original mandate for HTML. HTML was created to define the structure of a document; not to define how it should be displayed. That's why the first tags created told a browser where a paragraph started and finished, which bits of text should be displayed as headings, and so on. It wasn't the intention of the original creators of HTML to allow webpage designers to control the ultimate appearance of the page. That was meant to be left up to the browser. But, designers did want that level of control, and that's how the <font> tag came into existance. And so everyone used the <font> tag. And used it... and used it... and used it... and used it. Pretty soon, every page had become littered with font tags, all changing the face, size and colour of text. You could double the size of a page (in terms of Kb) by just trying to get the appearance you wanted. fontus Interruptus So the people who control which direction HTML goes in, the World Wide Web Consortium, decided that in the next version of HTML we should have a different way of controlling the appearance of text in web pages. In part, this was an attempt to get HTML back to performing it's original task - telling a browser how a document is structured. But, because they knew people still wanted to be able to control how text appeared on a page, they had to think of a way of doing it without the <font> tag. Enter stage-left, the Style Sheet. New Kid On The Block Imagine a web page that has no <font> tags in it. It would look pretty boring, wouldn't it? OK, now imagine you wanted to tell the browser "Every time you see text in a paragraph, I want you to make it a sans-serif font, medium sized and green". Using font tags, you'd have to surround paragraph text with <p><font face="Arial, Helvetica, sans-serif" size="3" color="#00ff00">large chunk of paragraph text here</font></p> And, you'd have to put that code wherever paragraph text had been changed to something different and you wanted it to go back to sans-serif, green and medium-sized again. But, if we used Style Sheets to control the way the browser displays text, you would only have to tell the browser "every time you see text in a paragraph, I want you to make it Arial, medium sized and green" once. You do that by putting this code at the top of your webpage, in the <head>er: <style type="text/css"> <!-- P { font-family: Arial, Helvetica, "sans-serif"; font-size: medium; color: #00FF00; } --> </style> </head> <body> Rest of page goes here... So now, whenever you write text in a paragraph (by enclosing it by <p> and </p> tags), it will be in Arial, medium-sized, and green. And every bit of text within <p> tags will appear like that. And that means... ? It's fairly easy to understand the way it works. The first thing you type (here, it's the letter P) is called the selector. And the bit after it, the part contained within curly brackets, is called the declaration. The declaration says "every time you see a bit of text within P tags, make sure the font is Arial, or if they don't have that font, make it Helvetica, and if they don't have that font just make it the default sans-serif font. Make sure the size of it is medium, and make the colour of it green." The declaration bit is composed of attribute-value pairs. It's not a million miles away from the way you do it with <font> tags already. The only real difference is that you put font-family instead of FACE, font-size instead of SIZE, and color stays the same. After each attribute (the first bit) you put a colon, then you put the value, and after that you finish with a semi-colon. Then, if you want, you can put another attribute-value pair. (The way you write it on the page doesn't matter, BTW. I do it the way you can see here because I find it makes it easier to read, but you can write it all on one long line if you want). So what attributes are there? Well, you can specify: font-family font-style ("normal", "italic" or "oblique") font-weight ("normal" or "bold") font-size color background-color background-image word-spacing letter-spacing text-decoration ("none" for removing link underlining) text-transform ("capitalize", "uppercase" or "lowercase") text-align ("left", "center", "right" or "justify") text-indent line-height and a big handful of other things too. And the great thing is you can do the same with every other tag as well. If you want to make sure every level 1 heading is displayed in a serif font, red and extra-large, just below the closing curly bracket, you could write: h1 { font-family: "Times New Roman", Times, serif; font-size: x-large; color: #FF0000; } This would make every level 1 heading appear in a serif font, sized x-large and red. (BTW, Times New Roman is in quotation marks because the name of the font is more than just one word. It's advisable to do this... or so clever people have told me ;-) So what? Well... just imagine a page that goes <h1>A level 1 heading here</h1> <p>Here is the first paragraph, and it goes on and on but that's just a load of rubbish text to pad out this bit here</p> <h1>A second level 1 heading</h1> <p>Here is more paragraph text that just rambles on and on with no apparent end in site, just like an interminable droning monologue</p> <h1>Yet another big heading here</h1> <p>Oh Lord where will this miserable dirge end please stop it now, ahh I think I see the end in sight, at last thank heavens here it is hoorah</p> Using <font> tags, you would have to tell the browser how to display the headings and paragraphs every time. With CSS, you just tell it the rules once. And if the browser understands CSS (and the new ones do), it will obey. And why the HTML comment tags? That's because older browsers don't understand CSS (the <style> tag), and without it will happily write P { font-family, etc... at the top of your page, even though it comes before the BODY tag. So now, browsers that don't understand the <style> tag won't write out the P {font-family: stuff because it's in a comment tag, but browsers that do understand CSS also know that they should ignore the comment tag that comes between the 2 <style> tags. Clever, hey? Why do I need to learn CSS as opposed to sticking with HTML Well, Cascading Style Sheets are a part of HTML. CSS is not different to HTML, it's just a new and different way of controlling the appearance of elements on a page. It helps to get the bits of code that define the structure and the appearance of information apart. And CSS isn't limited to formatting text, either. You can also use it to position other page elements, such as images, or make them vanish or appear on cue. And when you combine CSS commands with a scripting language, such as JavaScript, you can produce some great dynamic effects (this is what is meant by "dynamicHTML"). However, right now support for these advanced features is a little patchy, so you can't afford to create your website using only these techniques, but over time, as more people start to use CSS-compatible browsers, they will become an increasingly important part of page design. So, you might say "Great! I'm going to stop using the font tag and control all my pages with CSS." Well, you could. And that wouldn't be a bad idea. In fact, it's a pretty good idea. But, people who use Netscape Navigator 3 to view your pages won't see your text with all your new-fangled, fancy CSS formatting. Why? Because NN 3 doesn't understand CSS. NN 4 does. IE 3 understands the basics, IE 4 understands a goodish chunk of it and IE 5 understands the most so far. Chunk of what? Well, the CSS1 specification. It's a document that says "in the future, we'd like to be able to control how our webpages appear by using all these CSS commands..." and then there is a big long list of commands. How much a browser understands of that specification is upto the people who make the browser. Plus, CSS2 has now been released. CSS2 adds new commands to the set of commands in CSS1, just as HTML4 added tags to the range of tags that already existed. So, I either use font tags or use CSS and know that my pages will look bad in NN3? Well, that's one way of looking at it. You can use font tags and CSS (by writing HTML 4 Transitional). The browsers that understand CSS will use those commands, and the browsers that don't understand CSS will at least understand the <font> tags. So, you've pages look groovy in all browsers. But, that's a bit of a pain to do. And it gives you more work. At the moment, if you want everyone to see your pages the same, that's what you've got to do. Or, you could say "To hell with NN3 users" and just use CSS to control the appearance of your page. T'is upto you. So why not just stick with <font> then? Because <font> has been deprecated in the latest version of HTML" . Depre-what? It means it ain't going to be around for long. Things move on, people progress, and so does HTML. It's a way of saying "Today's browsers might listen to <font>, but don't guarantee that tomorrow's will." If I need to learn CSS, how do I go about starting from the ground and working up to become familiar enough with it to be able to actually learn? Well, hopefully what I've told you already is enough to give you a gentle introduction to CSS. You probably understand the basics now. It really doesn't get much more complicated that this. However, there are 3 different ways in which you can use CSS. There are external style sheets, embedded style sheets and inline style sheets. External Imagine having a site with 50 pages, and you want them all to have the same appearance. You can do that by writing the line <link rel="stylesheet" href="mystylesheet.css" type="text/css"> in the <head>er of each file. Then, you just have a basic text file, change the extension to .css, and put in it all your CSS formatting, just as I've put at the top of this page. Then, because of the <link> tag you've put in all the pages, every page will use that CSS file to determine how the text looks. All the pages obtain their CSS formatting information from your external style sheet. So, if you want to change the text-colour from black to blue on 50 pages, all you do is alter one line in the file mystylesheet.css, and whamo! - all 50 pages change. Neat, huh? :-) The appearance of this page is controlled by the style sheet at /css/thenetprofits.css (BTW, if you click on that link and you're asked which application to use to view the style sheet, choose either Notepad or your favourite text editor). If I alter any of the commands in that style sheet, the look of this page would change. But, because it's an external style sheet, it's also controlling the appearance of other pages on this site. For example, take a look at this ColdFusion Setup Guide and see how similar it looks. Because they both use the same external style sheet, if I alter that style sheet, both pages would change. Embedded An embedded style sheet is like the one you've made here. It goes in between the <head> tags of your webpage and controls the appearance of just the page that it's in. Inline And inline style sheets aren't really sheets at all, but just individual commands to format a small section of text. For example, say your paragraphs are Arial and red. If you just want one paragraph to be blue instead, you would write <p>This text is red and Arial</p> <p style="color: #0000FF; ">Now all this paragraph is blue and still Arial</p> <p>And now we are back to red again</p> CSS Resources Start off with http://www.htmlgoodies.com/. HTML Goodies is written by Joe Burns, and he is an absolute God amongst writers. He has a very conversational style that is more like listening to him give a talk. And he's funny. Check out his section on CSS (I think you have to click the Tutorials link on the left, and then scroll down the page to find the CSS link). Then, once you're finished there, make use of the resources at http://www.hwg.org/resources/faqs/cssFAQ.html http://www.htmlhelp.com/reference/css/ and http://www.hypermedic.com/
	image slicing »