HTML & XHTML: The Definitive Guide, 6th Edition

Style Classes

CSS2 allows you to define several different styles for the same element by naming a class for each style at the document level or in an external stylesheet. Later in a document, you explicitly select which style to apply by including the styles-related class attribute with the related name value in the respective tag.

Regular Classes

For example, in a technical paper, you might want to define one paragraph style for the abstract, another for equations, and a third for centered quotations. Differentiate these paragraphs by defining each as a different style class:

<style type="text/css">
<!--
p.abstract {font-style: italic;
            margin-left: 0.5cm;
            margin-right: 0.5cm}
p.equation {font-family: Symbol;
            text-align: center}
h1, p.centered {text-align: center;
                margin-left: 0.5cm;
                margin-right: 0.5cm}
-->
</style>

Notice first in the example that defining a class is simply a matter of appending a period-separated class name as a suffix to the tag name as the selector in a style rule. Unlike the XHTML-compliant selector, which is the name of the standard tag and must be in lowercase, the class name can be any sequence of letters, numbers, and hyphens, but it must begin with a letter.^[*] Careful, though: case does matter, so abstract is not the same as AbsTRact. Classes, like selectors, may be included with other selectors, separated by commas, as in the third example. The only restriction on classes is that they cannot be nested; for example, p.equation.centered is not valid. ...