A Brief Discourse on Cascading Style Sheets

This page is devoted to the use of Cascading Style Sheets. The concept of Cascading Style Sheets follows the page layout and word processing usage of style sheets in that a designer or author can establish how a particular type of text, say a type of heading, will appear. They use a form of indirection, defining a set of instructions for formatting text in one place, and utilizing that definition in many places. In this manner, you can set the parameters for a type of text element, and these parameters are used for every occurance of that element. Should you decide to change the appearance of that element, say you want to make it italicized, you can change the definition once and the change becomes apparent with every element that uses that definition.

The styles available with Cascading Style Sheets are also more flexible than those available with basic HTML, and you can garner effects that are simply not possible using HTML. An example is the ability to have a background color for a block of text. Notice that the foreground color may be changed as well. In this manner, you can simulate highlighted text. Additional flexibility is seen in the use of a simulated BLOCKQUOTE, as in the following paragraph, along with the justification of text so as to avoid "ragged right" edges. While the "justify" attribute is defined in the HTML standard, it is not supported by many browsers and has been deprecated in the HTML 4.0 standard^aa. Another useful feature is the ability to indent the first line of a paragraph, like in your typical print publication. This is accomplished by defining a text-indent value (15 in the case of this document).

Some caveats in using CSS include the naming convention. CSS elements are named with any sequence of letters, numbers, and hyphens, but must begin with a letter. Those of you who are programmers may wish to name your CSS classes using underscores. This will produce no noticable effect in the resulting rendered HTML, as an underscore in a class name is illegal and hence will be ignored by all well-behaved browsers. Dashes, while illegal for variable names in many programming languages, are perfectly acceptable with CSS.

Other caveats become apparent when observing the rendering of this document in your browser. Note that the continuity of various effects, including background-color and text-decoration: underline is broken when used within a block to which text-align: justify has been applied. This is most pronounced in text lines which require a large amount of word spacing. You may be able to see this effect on the text above by adjusting the width of your browser.

Here is the Cascading Style Sheet file used in formatting this page:

P {text-indent: 15; text-align: justify} 
P.no-just {text-align: left}
P.title {font-size: larger; font-weight: bold}
A.back-blue {color: yellow; background-color: blue}
SPAN.back-blue {color: yellow; background-color: blue}
A.reverse {background-color: cyan}
A.superscript {vertical-align: super}
P.blockquote {margin-left: 30; margin-right: 30}
P.footnote {text-indent: -8; margin-left: 10; font-size: small}
A.book-title {text-decoration: underline}
SPAN.book-title {text-decoration: underline}
P.right-paragraph {margin-left: 60%; margin-right: 10}

Note that the recommended method for styling arbitrary text blocks is the use of the SPAN container. The SPAN container is defined such that, by default, it performs no modification of the text contained within. It appears to be intended solely to delimit a section of text for the purpose of applying styles. I have found that the A tag works equally well, and with a total of 6 fewer characters. Note the similar appearance between The White Goddess and A Treatise on White Magic. The first uses the SPAN CLASS "book-title", whereas the second uses the A CLASS "book-title". This effect may be limited to my browser (Netscape 4.51 for Macintosh), FYI. All things being equal, I prefer using the A tag for this purpose even though the intent may be less clear than with the SPAN tag.

Cascading Style Sheets are cool, provide a great deal of flexibility for formatting documents, and are relatively easy to implement and understand. On the down side, they are not evenly supported across browsers, have quirky effects in some instances, and can be confusing due to the inheritance of properties from unclassed tags by class level tags. That is, properties set in a P definition will be inherited by all classes of P definitions.

^a Musciano, Chuck and Kennedy, Bill. HTML: The Definitive Guide, 3^rd Edition, O'Reilly, 1998. The footnote notation in the above text illustrates a lack of support in some browsers of the 'vertical-align' property value 'super'. The first 'a' utilizes the HTML SUP container, while the second attempts to use the CSS property to render a superscripted letter.