EDIT: the blogging engine may be eating my style content, so if you don't see colors, bolds, and such in the below text, check out the same entry as an HTML file on my web site at http://www.nocommonground.com/blogSamples/selectors.htm

Classes vs IDs

Classes and IDs both allow you to define how a control will look on a page, though they have different uses, and shouldn't be used interchangeable. The first and biggest difference, is that with ID's, you can only have a single instance of an ID on a page.  For example, if you have a DIV on your page with the ID as "myDiv" you cannot have another control (of any type) with the same ID.  Thus, if you create a selector, you can only use it once.  With classes, you can use it as many times as you want.

IDs do have a few things over Classes though.  ID's generally take a higher precedence over Classes when trying to determine which control gets what style applied.  For example, this span has both a class selected, and an ID defined.  The class sets the background colour to blue, and the ID sets the background colour to green.  Since the ID is higher in the precedence list, it takes priority.

Be careful though, as browsers generally treat class names as case sensitive, thus you may find yourself wondering why a style isn't being applied.  It's either the browser being funky or a problem with cases!

Using Multiple Classes

One of the cool things that you can do with CSS classes that you can't do with ID selectors is inherit and build upon other classes, or use space separated lists in the class definitions of controls to apply multiple styles on a single control.  IE6 does have some weirdness in this area, though IE7 and FireFox do behave correctly. 

I've created 4 style classes below, .blue, .bgYellow, .bold and .combo.blue.bgYellow.  Each one is pretty simple, and does exactly what it's name implies.  Where things start to get interesting is when you use more than one class in a given control.  For example, the second scenario, where class="blue bgYellow".  It combines the properties blue class and the properties of the .bgYellow class, into a composite class, resulting in blue text with a yellow background.  (IE6 has a bug here and includes the .combo.blue.bgYellow properties here), One of the cool things that you can do with CSS is inherit and build upon other classes, or use space separated lists in the class definitions of controls to apply multiple styles on a single control.  IE7 and FireFox does display this properly, though as mentioned above, IE6 needs a swift kick in the pants.

 <style type="text/css">
     a[href="http://www.microsoft.com"] { background-color: Red; color: White; }
     #spanID { background-color: Green; } .blue { color: Blue; }
     .bgYellow { background-color: Yellow; } 
     .bgBlue { background-color: Blue; }
     .combo.blue.bgYellow { font-weight: bold; }
</style>

<span class="blue">this is just a single, unexciting class, nothing special here</span>
<span class="blue bgYellow">composite of both .blue and .bgYellow styles</span>
<span class="combo blue yellow">composite of .blue, .bgYellow and adds bold to the mix</span>

Attribute Selection

This is one of my favourite things about CSS, and unfortunately, it's not supported by IE6 so if you're looking with IE6, you won't see the cool factor of this.  I've got two links here, Live.com and Microsoft.com. If you're looking at this in something other than IE6, Live.com looks like a normal link, but the Microsoft link is white text with a red background.  CSS lets you specify styles based on attribute values.  In my style block, I've got a[href="http://www.microsoft.com"] { background-color: Red; color: White; }  So any a tags, that have the attribute href="http://www.microsoft.com"] get that style applied to them.  You can also apply based on partial values by doing using a[title~="yay!"].