Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 5.10
October 1999

Columns

Segments

HowTo

Extras

Reviews

Download ATPM 5.10

Choose a format:

The Personal Computing Paradigm

by Michael Tsai, mtsai@atpm.com

Cascading Style Sheets

In recent columns I’ve talked a lot about the virtues of style sheets in word processors. Despite the fact that few people use them, word processor style sheets are old hat. The style sheet buzzword these days is CSS, which stands for Cascading Style Sheets. CSS is part of the latest HTML specification, and now that most people use browsers that support CSS, there’s little reason not to design Web sites that use CSS to specify formatting.

This month’s column is an introduction to Cascading Style Sheets. I assume a basic knowledge of HTML, the markup language used to create Web pages. If you aren’t familiar with HTML, you should probably read one of the references at the bottom of this article first. Even if you use a WYSIWYG editor such as Adobe GoLive for creating your HTML, you will need a basic understanding of HTML’s tags and structure to get the most out of CSS.

Applying Formats With Styles

Think of HTML tags like <H1>, <H2>, <P>, <EM>, and <LI> as named styles in a word processor. To make a non-CSS HTML document you apply these tags and the user’s browser determines how to display them. Typically, it makes headings large and bold, puts white space between paragraphs, and indents list items with a hanging bullet or numeral.

CSS is not a whole new language for writing Web pages. Instead, it lets you specify styles for the HTML elements with which you are already familiar. CSS lets you suggest formatting attributes for each HTML tag. Together, these format specifications constitute a style sheet. A CSS-savvy browser will use your style sheet as a sort of preferences file to determine how to render your document. Browsers that do not support CSS simply ignore the style information and display headers, paragraphs, list items, and all the other HTML elements the same way they always did.

Part of the ATPM site without (left) and with (right) CSS
 
withoutStyles
 
withStyles

Specifying a format for an HTML tag is easy. You simply list the name of the tag followed by a set of formatting attributes, which are placed inside curly brackets and delimited with semi-colons. For example:

BODY {font-size:10pt; font-family:Geneva, serif}

This states that text inside a BODY tag should be set in 10-point text using the Geneva font (if available) or a standard serif font if Geneva is not available. (The alternative font list for font-family works the same as the font list in HTML’s <FONT FACE> attribute.) Font-size and font-family are called properties and are separated from their values by colons. Property-value pairs are separated from each other by semi-colons.

That’s it. The above technique will let you specify styles for any HTML element you want. List all the entries in your style sheet and you’re done. For instance, your finished style sheet might look like this:

BODY {font-size:10pt;font-family:Geneva,serif}
H1 {color:000099;font-size:36pt;font-family:Helvetica,sans-serif}
H2 {color:000099;font-size:18pt;font-family:Helvetica,sans-serif}
H3 {color:000000;font-size:18pt;font-family:Helvetica,sans-serif}
P {font-size:10pt;font-family:Geneva,serif}
EM {font-weight: bold; color:990000}
A:link {color:000099}
A:active {color:333333}
A:visited {color:333333}

There are some special elements like A:visited (which refers to links that the user has already seen), and there are many more properties than color, font-size, and font-family. For instance, there are properties for controlling spacing, positioning, font-weight, background color, and much more. You can read all about these properties in one of the references listed at the end of this article. For now, just remember that they are all used in the same way.

Cascading Styles

So far we’ve discussed how CSS can specify styles for HTML elements, but we have not seen why they are called cascading style sheets. "Cascading" refers to HTML elements inheriting attributes from their superiors in the tag hierarchy. In general, tags inherit formatting from the tags that contain them. [Footnote: for a more precise definition of inheritance through containment, see Danny Goodman’s book or the W3C site.] For example, if you’ve specified that paragraphs are in Geneva, then emphasized text in paragraphs will also be in Geneva because the <EM> tag is contained by the <P> tag. Most of the time this is exactly what you want. Say you’ve specified that emphasized text is bold and red:

EM {font-weight: bold; color:990000}

Then emphasized text in paragraphs will be formatted just like the other text in the paragraphs (same font, background color, spacing, etc.), except that it is bold and red. Likewise, emphasized text in a list item will be formatted just like the list item, except that it is bold and red. If your paragraphs are in Geneva and your lists are in Palatino, then the emphasized text will automatically pick up—inherit—the correct font from the tag that contains it.

Cascading works analogously for other HTML elements, and you can let as many properties as you want cascade for as many levels as you want. You can even use cascading to make your style sheets shorter and easier to read. For example, in the style sheet in the previous section we specified each property individually for each heading level. However, we could say the same thing using:

H {font-family:Helvetica, sans-serif; font-size:18pt; color:000000}
H1 {color:000099;font-size:36pt}
H2 {color:000099;}

This says that all headings should be in black Helvetica 18. Each level of heading will inherit these properties, although we can override them if we wish. In this example, level 1 headings override the color with blue and the size with 36pt. Level 2 headings appear in blue Helvetica 18, as before, but now we only have to specify that they’re blue. The other formatting attributes are inherited from the properties we’ve specified for H.

Not only does the cascade-and-override approach decrease download times by leading to smaller style sheets, it also affords the Web designer greater flexibility for modifying page appearance. For instance, one could specify individual colors and sizes for each level of heading, but have all the headings inherit their font families (as above). Changing all the fonts for all headings on all pages of a site is as simple as changing the font-family property for H.

Where Style Sheets Go

Once you’ve made your style sheet, there are two ways you can apply it to pages in your site. One way is to insert a line like the following into the <HEAD> section of your HTML documents:

<LINK REL="STYLESHEET" HREF="styles.css" TYPE="TEXT/CSS">

The value for the HREF attribute should be a link to the text file containing your style sheet. Thus, an HTML file including the above line would reference a style sheet named "styles.css" that resides in the same folder as the HTML document. Probably the easiest thing to do is to put a single style sheet file at the top level of your Web site and include an absolute link such as "/styles.css" in each of your HTML files.

The primary advantage to this method of referencing style sheets is that if all your pages reference the same style sheet file, you can easily change the look of your entire site just by editing that one file. Another plus is that browsers can cache the style sheet file so that if multiple pages on your site reference the same style sheet, users will only have to download it once.

The alternative to referencing an external style sheet file is embedding the style sheet directly in your HTML file. This is done by including the <STYLE> tag inside the <HEAD> section of your HTML file.

<STYLE TYPE="TEXT/CSS">
<!--
(Style sheet goes here)
-->
</STYLE>

Note that the style sheet itself is placed in an HTML comment (delimited by <!-- and -->) within the <STYLE> tag. This is to prevent older browsers that do not understand CSS from trying to interpret and/or display it. Because of this, you must be careful not to include comments in your style sheet (for instance to explain what each style is used for). HTML doesn’t approve of nested comments, so you may not get the results you expect.

Embedding style sheets in each HTML file is useful when you want users to be able to save files to disk with all the style information included. Using the first method, style information would be lost upon downloading.

CSS vs. <FONT>

By now you may be wondering what all the fuss is about. After all, you could apply fonts and styles using <FONT FACE>, <FONT COLOR>, <B>, <I>, <U>, and other HTML 3.2 tags. If we could do all this before and older browsers don’t support CSS, then why use it? There are at least three good reasons:

  1. CSS is easier to apply. You can declare in the style sheet that all paragraphs should be in Geneva 10, and they will be. With HTML 3.2, you have to include a font tag for each paragraph.
  2. CSS makes it easier to change designs because you can modify the style sheet for an entire site without touching any of the content pages. This also means that the site content can be created before the design has been completed.
  3. CSS lets you control far more properties than the traditional HTML tags do. Not only can you do things you couldn’t do before, but it is no longer necessary to abuse structural tags to create effects that you need. For instance, many people used HTML’s <BLOCKQUOTE> tag to indent text. With CSS you can specify paragraph margins on all four sides in a variety of units, and save <BLOCKQUOTE> for the quotations it was intended for. Of course, you can use CSS to format BLOCKQUOTEs any way you want.

Next Time

Cascading Style Sheets are far too large a topic to cover in a single article. I hope that you now have a feel for what CSS is and how you can use it—either for new pages that you are designing or to spruce up old Web content. Next time, I’ll discuss how you can take the cascading concept even further by using the CLASS attribute, how you can use multiple style sheets in the same document, and how you can use BBEdit’s include mechanism in conjunction with CSS overrides to create some impressive effects.

Online References

Books

apple“The Personal Computing Paradigm” is copyright © 1999 Michael Tsai, mtsai@atpm.com.

Also in This Series

Reader Comments (0)

Add A Comment





 E-mail me new comments on this article