cascading style sheets (CSS)

Most word processor users are familiar with the use of styles in formatting text. Using a built-in style or defining one’s own, particular characteristics can be assigned to the struc-tural parts of a document, such as headings, lead and body paragraphs, quotations, references, and so on. There are sev-eral advantages to using styles. Once a style is associated with an element, the formatting attached to that style can automatically be applied to all instances of the element. If the writer decides that, for example, level two headings should be in italics rather than normal font, a simple change to the “head2” style will change all level two headings to italics.

Cascading style sheets (CSS) extend this idea to the creation of Web pages. The style sheet defines the structural elements of the document and applies the desired format-ting. Instead of the main text of the document being filled with formatting directives (see html), a style sheet is asso-ciated with the document. When a compatible Web browser loads the page, it also loads the associated style sheet and uses it to determine how the page will be displayed. In other words, the structure of the document is separated from the details of its presentation. This not only makes it easier to change styles (as with word processing), but it also means that different style sheets can be used to tailor the document to different viewing situations (for example, viewing in a browser on a handheld PDA).

CSS uses a standard “box model” for laying out the pre-sentation of a page. From outside in, the areas are defined as outer edge, margin, border, padding, inner edge, and the content area. Styles are applied in an order that depends on the relationship of the affected elements. For example, a style defined for the text body will be inherited by the paragraph, which can then redefine one or more of its ele-ments. Similarly, an emphasis style used within a sentence might override the paragraph style in turn. It is this flowing of definitions down through the hierarchy of styles that cre-ates the “cascading” part of CSS.

As CSS developed further, separate specifications have been provided for different media that can be included in a Web page: speech (to be read by a speech synthesizer), Braille (for a tactile Braille system), Emboss (for Braille printing), Handheld (for PDAs and other devices with lim-ited display space), Print, Projection (for computer projec-tion or transparencies), Screen, Tty (teletype-like displays with fixed-width characters), and TV.