CSS

Cascading Style Sheets provide presentation (or style) information to web pages and XML documents. In the old days of the web, HTML was the way to do this sort of thing—fonts, colours, positioning, etc.—had to be controlled with HTML tags right there in the document. CSS separates the presentation rules from the content itself.

Benefits

Since style sheets can be linked to, this provides the opportunity to use one style sheet for many pages. Thus, if you have to make a change to the style, you've only got to edit one document and the change will be reflected in all the pages linking to it. Cool, huh?

Also, by separating the styling info from the content, each is out of the other's way, minimizing clutter and maximizing readability and accessibility.

Having multiple style sheets for a document also allows the content to be presented in different ways for different purposes (e.g. printer friendly pages).

Browser Adoption

It's been a long, hard road for CSS, primarily because browser makers first stabs at implementing CSS were slow (to be implemented, not rendered), incomplete, incorrent and/or inconsistent. This has largely improved over time, but when releasing content, one should at least be aware that there will be lots of older browsers still out there and kicking.

The spotty past and inconsistencies between platforms spawned a lot of rather ugly hacks to get things working, and if you bum around the web long enough, you'll certainly see some.

Some CSS designers have resorted to using filters to deliver different CSS to different browsers, or exploiting bugs in order to get a page to render the way they want on different platforms. Style sheets provide a wonderfully versatile and powerful way to control how your content will be presented, but browsers all seem to have their differences in how they render, so as a developer, it's important to be aware of which browsers you are trying to code for, and test the rendering on different platforms.

Learning CSS

Cascading Style Sheets are one of those things that is easy to pick up, but hard to master. The good news is there's a lot of free help out there.

SitePoint CSS Reference
CSS Wikipedia article
The CSS Zen Garden
CSS at W3C

The CSS Specification 

CSS3

CSS3 is out in the latest browsers with lots of cool new features.

Check out CSS3.info with previews and tutorials on using it.

CSS Basics

This is a simplified explanation of the very basics of CSS.

CSS rules are written as a property, a colon, a value and a semicolon. For example, this CSS rule sets font size:

font-size:16px; 

You can apply CSS styling to HTML by tag, class or id.

By Tag

You apply CSS styling by tag by adding a style="" attribute to an HTML tag. For example, the following CSS style changes the font size of a particular link:

<a style="font-size:18px;" href="http://www.apple.com" >Apple</a> 

You can apply CSS styling by class to any number of tags by adding a class="" attribute to all the HTML tags that you want to be effected, adding a style tag and defining a CSS style for that class starting with a period (.). For example:

<a class="biglinkstyle" href="http://www.apple.com">Apple</a><a class="biglinkstyle" href="http://www.macrumors.com">MacRumors</a

<style type="text/css">
.biglinkstyle {
font-size: 16px;
}
</style>

You can apply CSS styling by ID to one particular tag by adding an id="" attribute to the HTML tag that you want to be effected, adding a style tag and defining a CSS style for that class starting with a pound (#). For example, this modifies the previous example to make the Apple link even larger than the other links of class "b:

<a id="theapplelinkstyle" class="biglinkstyle" href="http://www.apple.com">Apple</a><a class="biglinkstyle" href="http://www.macrumors.com">MacRumors</a

<style type="text/css">
.biglinkstyle {
font-size: 16px;
}
</style>
#theapplelinkstyle {
font-size: 24px;
}
</style>

You can also create an external style sheet file to keep all your styles together separate from page content.