-->
Bookmark and Share

Using Style Sheets

Review the W3C CSS standard recommendation.

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

Attribute Selector Patterns
Pattern Description
E[attr] Attribute selector, matches any element E that has attribute attr, regardless of its value.
E[attr="value"] Attribute selector, matches any element E that has attribute attr set to the specified value.
E[attr~="value"] Attribute selector, some element attributes may have multiple values, separated by spaces. This pattern matches any element with attribute attr containing the specified value in its list.
E.value Class selector, for HTML pages only. Matches any element that has the specified value in its CLASS attribute. Equivalent to E[class~="value"].
E#value ID selector, matches the element with the given ID. For HTML this is equivalent to E[id="value"].

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.

Note that if you do specify a tag name on a ID selector (e.g., h1#mainTitle instead of #mainTitle) the tag name and ID must match the element in order for the style to be applied.

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.

Pseudo-class and Pseudo-element Selectors
Pattern Description
E:first-child Pseudo-class, matches the element E if E is the first child of its parent. Similar to * > E but would only match the first child of an element.
E:first-letter
E:first-line
Pseudo-elements, applies a style to the first letter or line of content in element E, rather than the entire content.
E:before
E:after
Pseudo-elements, these can be used to insert generated content before and/or after element E's content.
E:link
E:visited
Link pseudo-classes, these apply to links depending on their state.
E:active
E:hover
E:focus
Dynamic pseudo-classes, applies to links or form elements in response to user actions.

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.

Tip

Define any :hover rule for links after any :visited rule in a style sheet to make the hover effect work on visited links. The reason for this has to do with the order of precedence used for applying style rules which is discussed further on.

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.