Classes and IDs
Before we get into some heavy-duty CSS examples, there's a last set of CSS concepts that we need to discuss: classes and IDs. Both are actually HTML "things," but applying CSS rules to classes and IDs that you define is one of the most powerful ways to use CSS, and so we should discuss how to do so.
What are Classes?
The idea of classes is that you can make different types (classes) of a single HTML element, and each class will have different rules governing it. Perhaps you want to have most paragraphs appear in a sans-serif font, but you want your literary quotations to appear in a courier font and be green. You would use CSS to define how normal P tags look, and then use it to define how class "poetry" p tags look different.
p {font-family: sans-serif; }
p.poetry {font-family: courier; color: green; }
Once you've got your poetry class defined, you use <p class="poetry"> instead of just <p> when you want your poetry-class paragraphs to appear. The beauty of classes is that if you one day decide that you want to change how a particular type of information (your footer font, your poetry, your family pictures) are displayed, you can change your CSS file and watch the changes ripple through automatically.
What are IDs?
IDs are very similar to classes, in that they are a way to assign a rule to a subset of elements, but you can only have one of each ID in a single Web page. An example always helps to understand these things... Perhaps you will have Web pages with many poems on them, but you want the first poem on every page to be blue, instead of green? The CSS code is below:
p {font-family: sans-serif; }
p.poetry {font-family: courier; color: green; }
p#firstpoem {font-family: courier; color: blue; }
We can now use <p id="firstpoem"> in our HTML to separate the poem identified as "firstpoem" from other paragraphs.
Classes and IDs can be a little confusing, but as you learn to use them, you'll learn to love the power and flexibility that they give you when combined with CSS!
