Using Style Sheets

An element's attributes can also be used in selector patterns. These are listed in the table below, again with some links to examples.

The universal selector can be used in place of a tag name in these patterns as well. For example, with

*.highlight { background-color: #ffff00 }
*#mainTitle { font-size: 150%; font-weight: bold; }

the first rule matches any element with class="highlight" set while the second matches the element with id="mainTitle" set. In many cases, the '*' can be omitted,

.highlight { background-color: #ffff00 }
#mainTitle { font-size: 150%; font-weight: bold; }

which is often seen in practice. These examples bring up a point regarding class selectors vs. ID selectors.

Class vs. ID

The ID attribute of an HTML tag is intended solely to provide a unique identifier. The CLASS attribute, however, was specifically designed to allow authors to assign styles to elements.

Strictly speaking, no two elements within a document (web page) can have the same ID. Anytime you add an ID attribute to a tag, its value should be different from that of any other element's ID on the page, even if they have different tag names. So a style rule with an ID selector can, at most, only apply to a single element on a page.

So why not just use an inline style instead of an ID selector in a style sheet? Well, you'll probably find it more convenient to keep all your style definitions in one place, rather than scattered throughout the document. And, if the style sheet is external, it can be shared by multiple pages.

The class selector, on the other hand, can be applied to several elements on a page. You can even make rules using the same class name with different tag names. As an example, given the following,

h3.warning { 
  color: red;
}

p.warning {
  color: gray;
}

...

<h3 class="warning">Danger</h3>

<p class="warning">Proceed with caution!</p>

the text within the H3 element would be red but the text within the P element would be gray.

Multiple Classes

A tag can be assigned more than one class by specifying a list of class names separated by spaces in its STYLE attribute. Consider this code,

.warning { color: red }
.highlight { background-color: yellow }

...

<h3 class="warning highlight">Danger</h3>

<p class="highlight">An important point.</p>

The H3 element would appear as red text on a yellow background because both classes are applied. On the P element however, only the background color is affected.

This points out another difference between the CLASS and ID attributes: while an element can be assigned several classes, it can have only one ID value.

Pseudo-classes and Pseudo-elements

The last set of selectors to be covered involve pseudo-classes and pseudo-elements. These allow styles to be applied to certain elements under special conditions or to certain parts of an element's content.

The :first-letter and :first-line selectors are called pseudo-elements because they are not applied to the entire element but rather to a portion of its content.

The :before and :after pseudo-elements allow you to prepend or append generated content to an element's existing content. This can include character strings and counters. Information on generated content can be found in the standards recommendation.

The link pseudo-classes should be familiar, they relate to the old LINK="color" and VLINK="color" attributes for the HTML BODY tag. Likewise, the dynamic pseudo-class :active corresponds to the old ALINK="color" BODY tag attribute. These were originally designed to visually distinguish links by color for the user's benefit and the feature has been adopted into CSS.

The other dynamic pseudo-classes allow dynamic style changes to certain elements in response to user actions such as mousing over links or selecting a form field to allow input to be entered.

Language Selectors

Not covered here are selectors based on language, E[lang|="cc"] and E:lang(cc), which can be useful for displaying foreign text and punctuation in a document. Information on these and other language-related features can be found in the standards recommendation.

Chaining Selectors

Many of the selector patterns can be combined to make a rule more specific. For example, with these rules:

div p a.definition { color: green }
div p a.definition:hover { color: red }

the first would apply only to links with class="definition" that are contained within a P element that is itself contained within a DIV element, making them green. The second rule would change the color of those same links to red when moused over.

Prev | Next