LIS 523/5 - Cascading Style Sheets

According to SecuritySpace (April, 2007), about 54% of Web sites use style sheets.

You can define a style sheet either within an HTML document (using the style tag) or in a separate file.

The benefit of defining the style sheet in a separate file is that it can be used by many HTML documents, possibly created by many different content providers. The style sheet can be saved as a file with an .htm extension, but it has a different format from HTML. (For practical purposes, the extension used does not really seem to matter; .css or .abc generally works just as well.)

Here is a simple example of a style sheet:

   H1 {color: red; font-family:Blackadder ITC}
   H2 {color: green; font-family:Bradley Hand ITC}
   PRE {color:orange; font-family:Courier}
   SPAN.myStyle {background-color:black; color:yellow;}
To use an externally defined style sheet in an HTML document, use the link tag in the head element, as in the following example:
    <link rel=stylesheet type="text/css"
Exactly this method was used for this page. If you look at the source, you will see that it contains nothing to set the special colors and fonts seen in the headings and the preformatted text except the reference to the style sheet file.

In addition to defining general styles for standard HTML tags, style sheets may define other styles that can be applied selectively. One way of doing this is by appending . plus a custom style name to the standard HTML tag; the style is then invoked in the HTML file by assigning the custom style name to the class property of the HTML tag, as in

    <span class=myStyle>This is a test</span>
This sentence shows an example of the result.

In the stylesheet illustrated above, pre and span.myStyle are examples of what are referred to as selectors (specifically, they are a type selector and a class selector). CSS allows various other kinds of selector, some with quite complex syntax, to specify conditions under which particular styles are applied.

Descendant selectors specify styles to be applied when an element occurs within an element of a specified class. They take the form of the type selector for the containing element, a space, and the type selector for the contained ("descendant") element; for example, h1 i can be used as a selector for italic passages that appear within level-1 headings.

Child selectors are a variant on descendant selectors in which the contained element is supposed to be contained immediately within the containing element and not within a third element which is contained in the containing element. Child selectors take the form of the type selector for the container, a greater-than sign (>), and the type selector for the contained element; for example, ul>li should be a selector for list items that are members of unordered lists, but not for list items that might be part of an ordered sublist within an unordered list. All browsers, however, treat child selectors as if they were ordinary descendant selectors.

All browsers seem to ignore descendant and child selectors where the container is a paragraph.

Adjacent selectors apply to an element that immediately follows an element of a specific type. They take the form of the selector of the preceding type, a plus sign (+), and the selector of the type to which the style is to be applied. For example, h1+p is a selector for the first paragraph after a level-1 heading. Adjacent selectors do not work in Internet Explorer, but do in other browsers.

Attribute selectors specify that whether a style is to be applied to an element depends on one of its attributes. The simplest form involves adding the attribute name in square brackets to the selector for the element, which simply means that the attribute must be present. Probably more useful is the variant in which an equals sign (=) plus a specific value in quote marks is inserted before the closing bracket. For example, a[href="index.htm"] could be used as a selector for links to a site's home page. Attribute selectors do not work in Opera or Internet Explorer, but do in Firefox and Netscape Navigator.

Pseudo-classes are selectors that define how elements are displayed under special circumstances. They take the form of a class selector, a colon, and the pseudo-class name. For example, the pseudoclasses a:active, a:hover, a:link, a:visited, and a:focus represent how a link will appear (a:focus is properly supported in Firefox and Netscape Navigator, but not in Internet Explorer, nor in Opera, which does not allow links to be focused).

Pseudo-elements are similar to pseudo-classes except that they specify how particular parts of an element are to be displayed. For example, pseudo-elements ending in :first-letter and :first-line, represent how the first letter or line of an element, such as a paragraph, is displayed.

Pseudo elements ending in :before and :after can be used (with the content property) to specify text or graphics to be inserted before or after each element with a given style. They are, however, ignored in Internet Explorer, though supported by other browsers. The value of the content property may be a character string without HTML tags, enclosed in quote marks, or take the form

where URL is the URL of an image. The value may also be open-quote or close-quote. Another form of the value,
is supported only in Opera.

Pseudo-elements ending in :first-child do not work correctly in any browser: in Internet Explorer, they are ignored; and, in other browsers, they are treated as if everything starting with the colon was not there.

ID Selectors are like class selectors, except that they use # instead of . and are invoked with the id attribute of the tag; they work in all common browsers.

The asterisk (*) is supposed to work as a wildcard that represents "any selector". In practice, it does work as the first part of pseudo-class, pseudo-element, and ID selectors, and, in Firefox and Netscape Navigator, as the first part of attribute selectors; it also works as the last part of an adjacent selector (except in Internet Explorer). No browser recognizes it, however, in class selectors or descendant selectors.

The same style can be applied briefly to multiple classes by separating their selectors with commas; for example, the following specifies that all headings from level 1 to level 3 should be in green:

h1, h2, h3 { color: green }

Javascript can be used within a style sheet to change properties of the style, but has no effect on rendering if invoked in the HTML page.

For More Information


Last updated April 20, 2007.
This page maintained by Prof. Tim Craven
E-mail (text/plain only):
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7