Specific CSS Properties
The last items on your CSS stylesheet should be the most specific properties. These are the properties that define specific sections of a page, or the colors of a section of your site, or even widgets that only appear in that one section. Because they're at the bottom, you can define them using classes (if there are more than one on a page) or by context (perhaps if you want to define all headlines on a specific page section as blue).
Define a Widget
A widget would be a single paragraph or other element that is different from the other paragraphs on your site. For example, you might have a pull-quote widget. You can define this widget using a class on your <p> tag and use it anywhere in the site. Remember that you've already set the default font size and color for paragraphs, so you only need to define it if you change it:
.pullquote {
color: #f80;
border: solid 1px #000;
background-color: #FFE4C4;
width: 200px;
font-size: 1.3em;
padding: 5px;
float: right;
}
For my pull-quote, I changed the font size and color, but I left the font family the same as the default paragraphs. So I didn't define the font family again.
Define by Context
Definining your page style by context allows you to define specific attributes based on a class that the entire page has been given. This is usually defined by a class in the <body> tag. For example, if you want your products section to have a color scheme using blues, and your buy now section to use reds, you can label all the pages in those two sections using a specific class:
<body class="product">
<body class="purchase">
Then, every page in those sections will have a context that will allow you to define situations for those sections. For example, to make all the headlines either blue or red in the sections, you would change the color of your headline tags, depending upon their context:
.purchase h1 { color: #f00; }
.product h1 { color: #00f; }
In the XHTML, you would not need to set any classes on the <h1> tags, or in fact do anything to them to get them to be the correct color when they're on the correct page:
<body class="product">
<h1>Buy Now</h1>
This is very useful, because it allows you to reuse the same HTML over and over again as a template, only changing the class of the body tag to define where the page displays. You can even do things to modify your widgets like your pull-quote to make it more specific to a page that it's on. As long as this more specific class comes after the more general .pullquote class, you only have to define the properties that change.
.purchase .pullquote {
color: #000;
background-color: #f00;
}
.product .pullquote {
color: #000;
background-color: #00f;
}
Order Your CSS
If you write your stylesheet in an order from most general to most specific, you'll have a stylesheet that you can update later and it will be as small and clean as you can make it. No matter how complicated your Web site becomes.
