HTML The Definitive Guide (91 page)

In addition to conventional style classes, the CSS 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 five pseudo-classes, three of which are associated with the tag. The other two go with the

tag.

The browsers distinguish three special states for the hyperlinks created by the tag: not visited, being visited, and visited. The browser may change the appearance of the tag's contents to indicate its state, such as underlining or changing the colors. Through pseudo-classes, the HTML author can control how these states get displayed by defining styles for A:link, A:active, and A:visited.

The link pseudo-class controls the appearance of links that are not selected by the user and have not yet been visited. The active pseudo-class defines the appearance of links that are currently selected by the user and are being processed by the browser. The visited pseudo-class defines those links that have already been visited by the user.

To completely define all three states of the tag, you might write: A:link {color: blue}

A:active {color: red; font-weight: bold}

A:visited {color: green}

Unvisited links will be shown in blue. When the user clicks a link, the browser will change its text color to red and make it bold. Once visited, the link will revert to conventional green text.

The two other pseudo-classes go with the

tag, and are named first-letter and first-line. As you might expect, these pseudo-classes control the appearance of the first letter and first line, respectively, of a paragraph and create effects commonly found in printed media, such as initial drop-caps and bold first lines. For example: P:first-line {fontstyle: small-caps}

converts the first line of a paragraph to small capital letters. Similarly, P:first-letter {fontsize: 200%; float: left}

tells the browser to make the first letter of a paragraph twice as large as the remaining text and float the letter to the left, allowing the first two lines of the paragraph to float around the larger initial
letter.[2]

[2] The properties that can be specified for the first-letter and first-line

pseudo-classes are the font properties, color and background properties, text-decoration, vertical-align, text-transform, line-height, and clear. In addition, the first-letter pseudo-class accepts the margin properties, padding properties, border properties, and float. The first-line pseudo-class also accepts the word-spacing and letter-spacing properties.

9.2.4.5 Mixing classes

You may mix pseudo-classes with regular classes by appending the pseudo-class name to the selector's class name. For example, here are some rules that define plain, normal, and fancy anchors: A.plain:link, A.plain:active, A.plain:visited {color: blue}

A:link {color: blue}

A:visited {color: green}

A:active {color: red}

A.fancy:link {text-style: italic}

A.fancy:visited {text-style: normal}

A.fancy:active {text-weight: bold; fontsize: 150%}

The plain version of is always blue, no matter the state of the link. Normal links start out blue, turn red when active, and convert to green when visited. The fancy link inherits the color scheme of the normal tag, but adds italic text for unvisited links, converts back to normal text after being visited, and actually grows 50 percent in size and becomes bold when active.

A word of warning about that last property of the fancy class: specifying a font size change for a transient display property will result in lots of browser redisplay activity when the user clicks on the link. Given that some browsers run on slow machines, this redisplay may be annoying to your readers.

Given also that implementing that sort of display change is something of a pain, it is unlikely that most browsers will support radical appearance changes in tag pseudo-classes.

9.2.4.6 Class inheritance

Classes inherit the style properties of their generic base tag. For instance, all the properties of the plain

tag apply to a specially defined paragraph class, except where the class overrides a particular property.

Classes cannot inherit from other classes, only from the unclassed version of the tag they represent. In general, therefore, you should put as many common styles into the rule for the basic version of a tag, and create classes only for those properties that are unique to that class. This makes maintenance and sharing of your style classes easier, especially for large document collections.

9.1 The Elements of Styles

9.3 Style Properties

Chapter 9

Cascading Style Sheets

9.3 Style Properties

At the heart of the Cascading Style Sheet specification are 53 properties that let you control how the styles-conscious browser presents your documents to the user. The standard collects these properties into six groups: fonts, colors and backgrounds, text, boxes and layout, lists, and tag classification. We'll stick with that taxonomy, and preface the whole shebang with a discussion of property values and inheritance before diving into the properties themselves.

You'll find a summary of the style properties in Appendix C, Cascading Style Sheet Properties Quick

Reference
.

9.3.1 Property Values

There are five distinct kinds of property values: keywords, length values, percentage values, URLs, and colors.

9.3.1.1 Keyword property values

A property may have a keyword value that expresses action or dimension. For instance, the effects of underline and line-through are obvious property values. And you can express property dimensions with keywords like small and xx-large. Some keywords are even relational: bolder, for instance, is an acceptable value for the font-weight property. Keyword values are not case sensitive: Underline, UNDERLINE, and underline are all acceptable keyword values.

9.3.1.2 Length property values

So-called length values (a term taken from the CSS standard) explicitly state the size of a property. They are numbers, some with decimals, too. Length values may have a leading + or - sign to indicate that the value is to be added to or subtracted from the immediate value of the property. Length values must be followed immediately by a two-letter unit abbreviation - with no intervening spaces.

There are three kinds of length-value units: relative, pixels, and absolute. Relative units specify a size that is relative to the size of some other property of the content. Currently, there are only two relative units: em, which is the height of the current font (written as em); and x-height, which is the height of the letter "x" in the current font (abbreviated ex). The pixels unit, abbreviated px, is equal to the size of a pixel on the browser's display. Absolute property value units are more familiar to us all. They include inches (abbreviated in), centimeters (cm), millimeters (mm), points (pt, 1/72 of an inch), and picas (pc, twelve points).

All of the following are valid length values, although not all units are recognized by the styles-conscious browsers: 1in