CSS stands for Cascading Syle Sheets, and it's a great invention. Earlier, we tossed out things like <font> tags that cluttered up our HTML with presentational information; now, we can put back all that presentation--and more!--without getting in the way of our semantic structural markup one bit.
We can add CSS data to our page in three ways. The first, the inline method, isn't much of an improvement over the bad old days. It looks like this:
The CSS part is the 'style' and what follows, and in this case it makes the link in question red and takes away its underline. Which works wonderfully as far as it goes; but as you can see this clutters up our markup as much as or more than any of those ancient horrors. It also has another limitation, which will soon become apparent.
The second way to get CSS into our page is to add something to our document head, that looks like this:
For argument's sake, stick this bit of code into your index.html and see what it does. Not bad, huh? Note that now, when you mouse over the 'Dan's silly tutorial' link, it turns red: that's, as you may have guessed, the result of the a:hover declaration. What the rest there does should be fairly obvious as well; most of CSS is, once you know about it. (One thing that might be less than obvious is the '#ccd's and things; for now suffice it to say that those are a way of writing colors).
The advantage of putting the CSS in our document head is that it now applies to the whole document. If we add another link, it will automatically become gray and go red on mouse-over, without any further coding. But we can even go one better! Copy the CSS information--that is, everything between 'body' and 'red; }' inclusive--out of your document head and paste it into a new text document, which you should then save as 'style.css' (making sure that it is in the same directory as your index.html). Then replace everything between '<style' and '</style>' with the following line:
Your document head should now look like this:
Save and reload index.html, and everything should look the same. What are the advantages, then, of this method? Well, in the first place you've cut down your page wieght somewhat: sure, the browser still has to fetch style.css, so the number of bytes involved has barely changed, but consider what happens when you make another page. You can link it to the stylesheet (for that's what style.css is, a stylesheet) in the same fashion, and then thanks to browser caching visitors to your site will only have to download your styles once in order to see them on even page. Even better (as I'm sure you have already realized) you'll be able to change every single page on your site by changing only one file!!
Of course, the amazing wonder of this third method doesn't mean that the other two are entirely useless. If you're making a single page, or a page that doesn't share any styles with the others on your site, the second method is for you. And then, if you want to add a very specific style to one element, and don't plan to have it show up anywhere else, you can go the inline route. Note also that you can combine all three methods: styles declared in a document head will override those of a global stylesheet, and inline styles will take precidence over all others (excpet user-defined styles, but we don't care about them). For now, though, we'll be using the third method. Now to make it useful...