HTML features

HTML contains elements and attributes that have been included specifically to facilitate styling by the CSS mechanism. Conversely, the CSS standard itself contains features aimed at its use with HTML documents. This section is aimed at readers who also work with HTML (either directly, or as an output format derived from XML source documents), and would like to apply CSS to HTML documents.

New attributes (Style and Class)

A new attribute, called Style, appears in the HTML 4.0 standard. This attribute contains a style rule that applies only to the specific instance of the element containing it. This in-line rule overrides all other rules:

<!-- HTML -->
h3   { color: blue }
...
<h3>Blue Header</h3>
...
<h3 style="color: green">Green Header</h3>

This feature is primarily aimed at design-led documents, where there are no predictable patterns to the layout of the text. As such, it is of little relevance to XML (though it was earlier shown how this feature can be used in unexpected ways).

An attribute called Class effectively provides a mechanism for extending the HTML DTD. For example, if the document author requires three different kinds of paragraph, the Class attribute can be used to define variants of the single Paragraph element:

<!-- HTML -->
<p class="first">The first paragraph.</p>
<p>A normal paragraph.</p>
<p class="note">NOTE: a note paragraph.</p>

The stylesheet can refer to the content of the Class attribute, creating different rules for each variant. The classification name is placed after the element name, separated by a full point. For the example above, three rules would be needed:

P        { color: blue ; font-size: 12pt }
P.first  { txt-indent: .5in }
P.note   { font-size: 9pt ; margin-left: 1in }

When a Class attribute does not appear in a specific paragraph instance, the first of these rules applies. When the Class attribute contains 'first', the second rule also applies. When the Class attribute contains 'note', the paragraph is indented, and the point size of the text is reduced.

It is not necessary to match the case of the text. 'FIRST' will match 'first' or 'First', though consistency is encouraged, if only for the sake of legibility.

Spanning and dividing blocks

Two additional elements have been defined to extend the capabilities of HTML. These are the Span and Division (Div) elements. Unlike other HTML elements, such as Emphasis, they have no implied meaning, and no default styles. Simply adding a Span element or Division element to an HTML document has no effect on embedded text, and in any case they are ignored by older browsers. These elements are only intended to be used to help build stylesheet rules (though Div was first introduced to isolate areas of the document that had different alignments, and has an Align attribute to affect embedded structures – but this usage should now be discontinued).

The Span element is an in-line element, which can be used to produce any ad hoc styles the author requires. Whenever the author requires an in-line element that does not exist in HTML, the Span element can be used. For example, if the name of a country is significant, and is to be presented in a unique style, the country name could be embedded within a Span element:

<!-- HTML -->
<p>I hear that <span>Belgium</span> is a nice
place to visit.</p>

If more than one additional element type is required, the Class attribute can be used. For example, if animal names are to be styled differently, the Class attribute can distinguish these domains:

SPAN.country { color: blue }
SPAN.animal  { color: green }
...
<!-- HTML -->
<P>I hear that <span class="country">Belgium</span>
is a nice place to visit. But there are no
<span class="animal">Giraffes</span> there.</p>

Link styling

Hypertext links can be styled in different ways, depending on whether or not the link has recently been traversed, and whether or not it is currently selected. The ':link' keyword identifies a hypertext link that has not been activated and is not currently selected. The ':visited' keyword identifies one that has been traversed (assuming that the browser has remembered this fact). The ':active' keyword identifies one that is currently being selected:

A:link      { color: green }
A:visited   { color: blue }
A:active    { color: red }