Example of HTML and CSS file

This document (from the HTML Stylesheet Sourcebook) tests CSS1. A stylesheet can prescribe formatting rules for elements based on the element name, or on specific elements according to their CLASS. A stylesheet can also prescribe generic formatting instructions for all elements with the same CLASS.

For example, if stylesheets are working, this abstract should be in a slightly smaller font, with a slightly larger indent than paragraphs outside the abstract. Also, unexplored links, such as the one at the beginning of this paragraph, should be in black text and underlined, whereas already explored hypertext links, such as the text at the end of this sentence, should be in gray, and not underlined.

Introduction to Stylesheets

The CLASS attribute lets an author mark elements for special formatting, but also for special meanings. For example, by marking the above section with CLASS="abstract" we not only mark the meaning behind the section, but provide a way for CSS rules to specify special formatting for the entire abstract -- CSS rules can be applied to particular classes.

Note also how the CSS rules are inherited by child elements -- that is, by elements within other elements. Thus the paragraphs inside the DIV with CLASS="abstract" inherit the extra indents and smaller font size of the surrounding DIV.

Generic Class Styling

Styling can also be applied to generic CLASSes. For example, this line of text and this line of text are both of the same class: CLASS="goofy". They can thus both take on properties of this generic class.