home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeHTML & XHTML: The Definitive GuideSearch this book

8.3. Style Classes

CSS2 classes let you create, at the document level or in an external style sheet, several different styles for the same elements, each distinguished by a class name. To apply the style class, name it as the value of the class attribute in its corresponding tag.

8.3.1. Regular Classes

In a technical paper you might want to define one paragraph style for the abstract, another for equations, and a third for centered quotations. None of the paragraph tags may have an explicit context in the document so you could distinguish it from the others. Rather, you may define each as a different style class:

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}

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 must begin with a letter.[53] Careful, though, case does matter, so that abstract is not the same as AbsTRact. And 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: p.equation.centered is not allowed, for example.

[53]Due to its support of JavaScript style sheets, Netscape cannot handle class names that happen to match JavaScript keywords. The class "abstract," for instance, generates an error in Netscape.

Accordingly, the first rule in the example creates a class of paragraph styles named "abstract" whose text will be italic and indented from the left and right margins by a half-centimeter. Similarly, the second paragraph style-class "equation" instructs the browser to center the text and to use the Symbol typeface to display the text. The last style rule creates a style with centered text and half-centimeter margins, applying this style to all level one headers as well as creating a class of the <p> tag named centered with that style.

To use a particular class of a tag, you add the class attribute to the tag, as in this example, as rendered by Internet Explorer in Figure 8-2:

<p class=abstract>
This is the abstract paragraph.  See how the margins are indented?
<h3>The equation paragraph follows</h3>
<p class=equation>
a = b + 1
<p class=centered>
This paragraph's text should be centered.
Figure 8-2

Figure 8-2. Use classes to distinguish different styles for the same tag

For each paragraph, the value of the class attribute is the name of the class to be used for that tag.

8.3.4. Pseudo-Classes

In addition to conventional style classes, the CSS2 standard defines pseudo-classes, which allow you to define the display style for certain tag states. Pseudo-classes are like regular classes, with two notable differences: they are attached to the tag name with a colon instead of a period, and they have predefined names, not arbitrary ones you may give them.

There are seven pseudo-classes, three of which are explicitly associated with the <a> tag. Nesting and language pseudo-classes

The new CSS2 :first-child pseudo-class lets you specify how an element may be rendered when it is the first child of the containing element. For instance, the following rule selects only those paragraphs which are the first child of a division; there can be no intervening elements. Then, and only then, will the paragraph's text contents be rendered in italics:

div > p:first-child  {font-style: italic}

Accordingly, the first paragraph in the following HTML fragment would be rendered in italics by a CSS2-compliant browser since it is the first child element of its division. Conversely, the second paragraph comes after a level-2 header, which is the first child of the second division. So, that second paragraph in the example gets rendered in plain text because it is not the first child of its division:

    I get to be in italics.
  <h2> New Division</h2>
    I'm in plain text because my paragraph is a second child of the division.

Finally, the CSS2 standard defines a new pseudo-class that lets you select an element based on its language. For instance, you might include the lang=fr attribute in a <div> tag to instruct the browser that the division contains French language text. The browser may specially treat the text. Or, you may impose a specific style with the pseudo-class :lang. For example:

div:lang(it) {font-family: Roman}

says that text in divisions of a document that contain the Italian language should use the Roman font family. Appropriate, don't you think? Notice that you specify the language in parentheses immediately after the lang keyword. Use the same two-letter ISO standard code for the pseudo-class :lang as you do for the lang attribute. Section, "The lang attribute"

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.