Coding the old way

The BODY definition to control the basic font family, color, and size. We also apply those same rules to TABLE tags to make sure Netscape displays our tables correctly.

Next, we define our H1 and H2 tags to apply a different text color, add a background, and control margin spacing around them.

Just for fun, we throw in a couple of classes to handle the exceptions to our rules.

Here's how that looks:

Mix And Match Shortcut Classes

Note the many common stylistic elements in the above example. The same background colors, text colors, and margin spacing are all sprinkled throughout the page. Hopefully, they repeat throughout the Web site. Consistent color and layout help create the same look and feel on each page. Consistency makes visitors comfortable and comfortable visitors stay longer!

We're going to maintain that consistency more easily by replacing the duplicative style rules with several shortcut classes. That's the "mix and match" part.

The term "shortcut class" isn't a true technical term; we just made it up. But it is quite descriptive. Shortcut classes let you take advantage of a little-used CSS technique: applying more than one class to a page element. Instead of creating a separate class or style rule for each individual element, we can apply multiple styles instead.

We can get the same formatting effects more easily making a few changes to our example style rules:

It sure looks different doesn't it? We took each of the common formatting rules and made each a separate class with a one or two-letter name. Simpler is better, but stay descriptive or you'll just confuse yourself.

Note that we did keep the font-size rule for the H1 and H2 tags in the STYLE definition. You could also create classes for each font-size, but it's harder to name and remember those because you should never start a class or ID name with a number.

Look how easy it is to apply these multiple classes: