[PREVIOUS]|[NEXT]|[TOC]

An Introduction to
Cascading Style Sheets

Norman Walsh

Abstract

Style sheets offer a new and powerful mechanism for supplying presentational information to a user agent displaying structured documents. The author begins by discussing the issues of structure and presentation, then follows with a discussion of style sheets on the Web. The focus of this article is Cascading Style Sheets from the W3C. The author discusses the mechanisms available for incorporating style sheets into Web documents and the general nature of cascading style sheets, and provides an overview of the display properties that may be modified with style sheets and the syntax for doing so. Finally, the author concludes with a short list of other style sheet resources on the Web.

In the Beginning . . .

Since its inception, HTML has been primarily concerned with representing the structure of documents online. By this, I mean that it allows the author to identify headings, paragraphs, lists, etc., but it does not provide (very many) facilities for specifying how the information can be presented (fonts, colors, spacing, text flow, etc.).

In the early days, this was fine; the Web was used mostly by technical people to publish articles and documents without much emphasis on how the documents looked. With the explosion of interest in the Web, both the audience and the authors have changed. Many people writing and designing for the Web want to exert much more control over the presentation of their documents. This brings the issue of structure versus presentation into sharp relief.

Structure versus Presentation

Look at this page. What do you see? There are two ways to answer that question. One is structural and one is presentational:

Structural

This is an article in a journal. It has a title, an author, and an abstract. The body of the article is divided into sections. Each section has a title and may include subsections. Most of the article is comprised of paragraphs, but lists, figures, and other elements are interspersed.

The most fundamental question in structural markup is, "what is it?" What structural significance does it have? Is it a filename, or a paragraph, or a list item? Is it a chapter title, or a person, place, or thing?

Presentational

This is a typeset page. The page begins with a centered title in 18 point ITC Garamond small caps. The author's name appears below the title in italics, also centered. Following the author's name is 40 points of white space followed by the abstract, also set in italics and with the bold, centered title "Abstract." The body of the article appears in two columns below the abstract. It is introduced by a heading in 15 point Franklin Gothic Book Compressed. Most of the article is comprised of paragraphs set in 9/12 ITC Garamond Light. The main text wraps around other elements that appear interspersed in the text.

The most fundamental question in presentation markup is, "what does it look like?" Is it green, or bold, or does it blink? Does it move, is it in a box, does it stand out, or is it hard to see?

Both of these answers are correct and useful.

The structural view of a document is useful because it provides us with context. Using the structural view, you can answer questions like "where is the section on font styles?" or build a table of contents with first- and second-level section headings, or identify the list of authors in a journal.

The presentation view is useful because we have expectations about how information will be presented. We expect books, journals, marketing information, advertisements, annual reports, and technical bulletins to look different (even when they have similar structure). In addition, many institutions have a distinctive look and feel that they expect to appear in all their published documents.

Ideally we want to be able to express both views of our documents whenever we publish them.

HTML is the Structure

The problem is that HTML, the primary markup language used to code documents on the World Wide Web, is really only useful for expressing the structure of a document.

It is possible to exert some control over the presentation, by employing tables and a variety of other tricks, but doing so blurs the structural view of the document. Adding new presentational tags to HTML isn't going to help, either. Presentational tags further blur the underlying structure of the document and could lead rapidly to multiple, incompatible HTML variants.

Style Sheets are the Presentation

Style sheets, which should become commonplace on the Web over the next few months, provide a means of associating presentational information with the structural elements of a document in a way that does not corrupt the underlying structure of the document.

A style sheet is a set of guidelines for the browser indicating how the various elements of a document should be presented. For example, the following set of instructions constitute a style sheet for web documents:

A sample document of this style is shown in Figure 1. I'm not convinced that that is a very attrac
tive document style, but it's a style nonetheless.

For comparison, the same document is shown in Figure 2 using the presentational information for HTML hardcoded into Microsoft's Internet Explorer.

Style Sheets on the Web

At present, there are basically two style sheet proposals on the Web: Cascading Style Sheets, level 1 (CSS1) from the W3C (included in this issue of the Web Journal) and DSSSL from the ISO. This paper describes CSS1, a style sheet mechanism for Web documents in HTML. DSSSL is more complex than CSS1 but also more powerful. When fully implemented, DSSSL will be rich enough to support print as well as online publishing from any SGML DTD. The online subset of DSSSL is available now in Jade (http://jclark.com/jade) but is not yet available in any commercial browsers.

Historically, there have been a number of proposals for style sheets on the Web. The W3C accepts that several may be adopted by different browser vendors over time, but they have focused their present efforts on Cascading Style Sheets as a simple, easy-to-learn mechanism for adding style information to HTML documents. The W3C Web Style Sheets page (http://www.w3.org/pub/WWW/Style/) provides more background information and pointers to a number of alternative proposals.

In using style sheets in your HTML documents, you will face three common problems: availability, support, and compatibility:

Availability

Style sheets are not supported by all browsers. At the time of this writing, support for CSS1 is limited to Microsoft's Internet Explorer 3.0, Emacs w3 mode (the Gnuscape Navigator), and two experimental products from the W3C: Arena and Amaya.

If you code a document in such a way that your style sheet is essentially required in order to meaningfully read the document, you will be limiting your audience. In the case of style sheets, this problem should be less severe than the current availability problem of browser-specific HTML extensions because the underlying HTML should be recognizable by any browser. As a further warning against this sort of coding, see the section "Conflicting Style Sheets: The Cascade."

Support

Until style sheets are widely used, corners and holes will remain where the browser developers either will fail to implement a feature described in the specification or will interpret it in such a way that it behaves differently than you think it should. The only remedy for this problem is test, test, test.

Compatibility

The compatibility problem will occur as soon as Netscape supports style sheets; it's really a generalization of the support problem. Netscape and Microsoft are bound to interpret parts of the specification in subtly different ways or implement different overlapping subsets of the specification.

This means that for a time, your documents may not appear to have the same style when viewed with different browsers. C'est la vie.

From the perspective of providing structurally meaningful documents for publishing content on the Web, and this is my perspective, style sheets are still an immediate win. They allow you to provide a meaningful document that looks better some of the time but is always viewable. If you are looking for cross-platform, pixel-level control of your display, CSS1 isn't the answer.

What Can You Do?

A CSS1 style sheet contains five basic types of presentational information, called properties:

Beyond the question of what you can specify is the question of what effect will it have. The answer will depend largely on the capabilities of the program that is interpreting the style sheet. In the CSS1 specification, the authors carefully use the term "user agent" rather than "browser" to describe the program that is interpreting the document. The presentation (and meaningfulness) of style elements will be very different if a document is processed by a text-only browser or a braille reader or a speech synthesis tool than when it is processed by a full color, graphical browser.[1]

Within a given browser, you may encounter other limitations. Most of the properties that expect a size or length accept both positive and negative values as well as percentages. Each browser is free to impose implementation-specific limits on the acceptable range of values. Different browsers are also likely to do slightly different things when they encounter conflicting or illogical property values. Browsers may even implement different behaviors depending on the language used by the document or local user settings.

The bottom line is that styles are suggestions, hints if you will, to the browser. There is no provision for enforcing any aspect of the presentation. You can no more guarantee that another user viewing your document with a style sheet will see precisely the same thing you see than you can currently guarantee if they are viewing your document without a style sheet on different browser or platform.

How Do You Include
Your Style Sheet?

Style information can be included in a document in several ways: 

 <LINK REL=STYLESHEET TYPE="text/css" HREF="http://...">

How Do You Assign Styles
to Elements?

However the style sheet is imported, the content of the style sheet itself is a text document containing rules and possibly comments (in the C language style /* comment */ notation).

Simple Style Rules

A simple style rule has the following form: 

element-name { property: list }
where the element name is the name of an HTML tag (H1, P, DIV, etc.) and the property list is the associated style commands. (We'll cover the specific properties in more detail a little later.)

Inheritance

Many of the property values applied to an element are inherited by elements placed inside it. For example, if you specify that text in headings should be red, emphasized text in the headings will also be red.

Elements In Context

Although there is no general mechanism for identifying elements in context (parents, children, siblings, etc.), a simple scheme is provided for specifying presentation based upon parent elements (you can specify formatting for EM inside of H1, for example, as distinct from EM elsewhere).

If you list a series of element names, instead of a single name, in a formatting rule, that rule applies only to elements that have all of the parents listed. For example, 

DIV H1 EM { properties }
assigns the specified properties to EM only if it occurs inside of an H1 inside of a DIV. Note that other intervening elements are possible; this rule would apply to an EM inside of an H1 inside of a TABLE inside of a DIV as well. If multiple nestings apply, the longest nesting wins.

Subclassing Elements

Sometimes it is desirable to treat specific instances of an element differently. For example, you might want to present warnings in a distinct way or have special formatting for links to URLs that are on another server.

Since HTML does not provide a great richness of structure for this purpose, CSS1 has hooks to the CLASS attribute, which can be placed on any element to assign a specific role to an element. For example, the preceding cases might be coded like this: 

<P CLASS=warning> 
<A CLASS=offsite HREF="http://...">...</A>
To specify the styles for elements of a particular class, add the class name to the element name with a period in the style sheet: 

P.warning { properties } 
A.offsite { properties }
Subclasses and nesting are independent operations. You can mix them freely in your style sheet.

Subclassing by ID

Another form of subclassing is by ID. This is the mechanism that allows you to avoid embedding specific style information in your document even for a unique element. If you have a specific element that must be uniquely treated, you can give it an ID: 

<P ID="special-case">
and then assign style information to that element with a #: 

 #special-case { properties }
Note that IDs are required to be unique within a document. This requirement may not be enforced by current browsers, but it is a requirement for a truly conforming document. If you have several elements that need special treatment, that's a CLASS.

Pseudo-Classes

Some aspects of the presentation are not dependent strictly on the structure of your document but are rather a function of the browser or of user interaction. You may wish to control the formatting of the first line of a paragraph, for example, or the display of visited links.

In CSS1, these aspects of presentation are controlled by pseudo-classes. Like classes, they are specified with the element in the style sheet. Pseudo-classes use : as the separator character. Classes and pseudo-classes may be mixed: 

A:visited { properties } 
P.initial:first-letter 
{ properties }
The first example here changes the properties of visited HTML links, the second changes the properties of the first letter of paragraphs with the CLASS "initial".

Conflicting Style Sheets: The Cascade

One fact that cannot be overlooked when considering style sheets is that both the publisher and the reader may wish to specify a style. Publishers frequently have a distinctive look that they wish to be reflected in all of their publications, and readers may have expectations as well, motivated by limitations of their environment or simple matters of artistic taste. (Personally, for example, I wish to specify that the background of all Web documents be white. I have a grayscale monitor at home, and most colored or graphical backgrounds on Web pages result in black-on-black text on my display.)

In addition, using modular style sheets is bound to result in occasional conflicts. It is necessary to know how these conflicts will be resolved (and frequently desirable to be able to specify how they should be resolved).

This raises the question of who gets control and this is where the word "cascade" comes from in Cascading Style Sheets. CSS1 includes a scheme for assigning priority to each style element. In every case, the style with the highest priority wins.

CSS1 is biased toward the publisher's styles. There is a single level of negotiation between the publisher and the reader; styles may be identified as "normal" or "important." If two styles have the same priority, the publisher's style sheet wins; otherwise, the higher priority style wins. Note, however, that browsers should provide a mechanism for disabling style sheets altogether so, in fact, the reader has final control.

Whether or not you agree with the philosophy that CSS1 uses, it's important to realize that this is a difficult problem, and there is no perfect solution. In some cases, the publisher may feel that absolute control is required (for example, if there is a legal obligation that warnings not be presented in a font smaller than 8 point), and in some cases, the reader must have control (for example, I simply cannot read dark red on black text).

A Closer Look at Properties

A property in CSS1 consists of a property name followed by a property value. The property name and value are separated by a colon. Some properties may have more than one value, in which case the value selected is dependent on some local condition (the accessibility of a particular font or image, for example).

Multiple properties may be specified by including multiple property name, value pairs separated by semicolons. The following example selects yellow on blue text for top-level headings and an italic font for paragraphs in block quotes: 

H1 { background: blue; 
     color: yellow } 
BLOCKQUOTE P { font-style: italic }
The following sections describe some of the properties that are available.

Foreground and Background Colors
and Background Images

There are two properties for specifying colors: color and background.

The color property controls the foreground color of an element. Usually this is the color of the text of an element. Colors may be identified either by name or by RGB value.

The background property controls the background color or texture of an element. When an image is specified for use as a texture, its position, scrolling aspect, and repeatability can be controlled.

Fonts Properties

There are five properties that control which fonts are used:

font-family

Identifies the font family, or typeface, to use. A series of names may be requested; the first available font will be used. There are five classes of "generic" fonts that may be specified as a last resort, serif for serifed faces like Times Roman; sans-serif for san-serif faces like Helvetica; monospace for fixed-width fonts like Courier; cursive for swash faces like Zapf Chancery, and fantasy for other hard-to-classify faces like Grunge or Western.

font-style

Identifies the style of the face, normal, italic, or oblique.

font-variant

Identifies another variation on the face--either normal or small-caps in CSS1.

font-size

The size of the face. Font size may be specified in absolute units or relative to the "current" size.

font-weight

The weight or boldness of the font, specified with either a keyword (bold or bolder, for example) or as a member of the ordered series 100, 200, 300, . . . , 900, where higher numbers are correspondingly darker.

Text Properties

Several text properties are available:

word-spacing

Modifies the default inter-word spacing.

letter-spacing

Modifies the default inter-letter spacing.

text-decoration

Selects underlining, overlining, link-through, or blink attributes (with additional, unspecified decorations anticipated from vendors).

vertical-align

Adjusts the vertical alignment of an element.

text-transform

Shifts text to uppercase or lowercase.

text-align

Specifies left, right, center, or justified alignment.

text-indent

Determines the amount of indentation on the first line of a block of text.

line-height

Specifies the distance between the baselines of consecutive lines of text.

Boxes

The formatting model suggested by CSS1 is one of concentric rectangles. Each element has a margin, inside the margin is an optional border, inside the border is optional padding, and inside the padding is the actual formatted content of the element. The box properties allow you to specify the nature of the rectangles and determine how the content of the element is formatted to fit in the space provided.

margin margin-bottom,
margin-left margin-right

Determine the size of the top, bottom, left, and right margins. Setting margin adjusts all of the margins simultaneously.

padding padding-bottom,
padding-left padding-right

Adjusts the amount of padding on the top, bottom, left, and right sides of the element. Setting padding adjusts all of them simultaneously.

border border-bottom,
border-left border-right

Selects the nature of the border on the top, bottom, left, and right sides of the element. Setting border adjusts all of borders simultaneously. You can specify the size, color, and style of the border.

width height

Identifies the width and height of the rectangle that contains the formatted content. Images should be scaled to the specified size, if necessary.

float

Identifies an element that should float to the left or right of a flow of text, allowing the text to flow around it.

clear

Specifies where floating elements may occur with respect to the element. For example, specifying clear: left indicates that there may be no floating elements to the left of the element; this will force the element to start below an image floating on the left side of the display, for example.

Classifications

There are three classification properties, display, list-style, and white-space:

display

Allows you to specify what category of object an element belongs to: is it a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item block element, like LI. An additional category is none, which indicates that the content of the element should not be displayed at all.

list-style

Influences the selection of numbers or bullets for lists. In addition to selecting one of the built-in enumeration or bullet styles, you can specify an image for use as the bullet character. You can also influence the position of the list mark with respect to the flow of the text. An outside list mark occurs to the left of the entire list item, whereas text wraps under an inside mark.

white-space

Identifies how the line breaking of an element is to be accomplished. Possible values are normal, where white space serves merely to delimit elements that are formatted according to the alignment of the surrounding element; pre, where all white space is significant; and nowrap where white space serves primarily as a delimiter, but no wrapping is done except where <BR> elements occur.

A Sample Style Sheet

Finally, Example 1 shows how we might code a CSS1 style sheet for the style I specified in the section "Style Sheets are the Presentation."

Does it work? Sort of.
BODY { background: blue;
color: white;
font-family: times, serif;
font-size: 10pt }
A:link { color: red }
A:visited { color: yellow }
H1 { font-family: arial, helvetica, sans-serif;
font-size: 20pt;
font-style: bold }
DIV.warning { margin-left: 0.5in;
margin-right: 0.5in;
color: yellow;
background: red }
BLOCKQUOTE { background: white;
color: black;
font-style: italic;
font-size: 8pt }
/* Background color isn't inherited, so we repeat it
on paras inside block quotes.
*/
BLOCKQUOTE P { background: white }
UL { list-style: url(fancybullet.gif) disc }

Support for style sheets in Internet Explorer 3.0 is disappointingly thin. Microsoft seems not to have supported style attributes on all elements (setting colors on block quotations has no effect, selecting a graphical bullet for lists does not work, etc.). I can find no documentation of what they do support, so it's a sometimes tedious process of trial-and-error to build a style sheet that works, and there is no warning when a style is syntactically incorrect although that error may have a wide-reaching effect on the style sheet.

Gnuscape Navigator does the best it can, but the text-only environment of GNU Emacs is fairly limiting (better support may be available in XEmacs, I haven't tried).

Conclusion

Despite these difficulties, I'm still a fan. It will get better, and the time to start experimenting is now. The examples that I presented here are fairly plain. For some examples of much more dramatic effects, see the Microsoft Style Gallery (http://www.microsoft.com/truetype/css/gallery/entrance.htm).

In this article, I've tried to give an overview of CSS1, but I haven't tried to supply all of the details. For more information, start at the aforementioned W3C Web Style Sheets page (http://www.w3.org/pub/WWW/Style/); it contains numerous links to information about CSS1 and style sheets in general.

About the Author

Norman Walsh

O'Reilly & Associates

90 Sherman Street

Cambridge, MA 02140

norm@ora.com

Norman Walsh is the author of Making TeX Work as well as Technical Director of Online Publishing at O'Reilly & Associates. Before Norm joined O'Reilly, he was a research assistant at UMass, Amherst, where he earned his master's degree in computer science. Norm has been programming and working with computers for more than a decade.

Besides maintaining a number of TeX and font-related resources on the Net, Norm enjoys bicycling, herpetology, rowing, and browsing record and book stores. Norm lives in Amherst with his wife Deborah, two cats, and a small menagerie of turtles, toads, frogs, and newts.

When he's not working, Norm dreams of buying a house so that he can build a pond in the backyard, construct an elaborate garden, and find other ways to spend most of his time outdoors.

[1] This article is not a specification, and I've chosen to use the term "browser" rather than "user agent" because it is reasonable to be less formal in this context. For the record, I'm committed to supporting every effort to make Web documents accessible by everyone, and I really mean "user agent" when I say "browser."
[PREVIOUS]|[NEXT]|[TOC]