The address for this web page is:
On to the next lesson!


Trying to control the way a document looks with straight HTML markup can be frustrating. Style sheets provide a way for a web designer to specify a "style" for a web document—or for hundreds of related web documents—in an "easy" way. (Well… like many things… it's easy once you understand it…)

For example, view the source code for this document, and look at the  HEAD  section. You'll see style sheet information that makes all  H1  (Heading Level 1) items appear in purple, and all  H2  (Heading Level 2) items appear in green. Neat!

The "cascading" part refers to how presentation is determined when there are conflicting instructions:

Mom wants this… Dad wants this… daughter wants this… friend wants this…
… the instructions "cascade" (like a waterfall) from higher-level sheets to lower-level sheets…

This section provides an introduction to Cascading Style Sheets.



What are "Cascading Style Sheets"? Cascading Style Sheets (CSS) give web designers more control over how pages are displayed. They allow style information, such as font size, line and letter spacing, and color, to be applied to any web page or collection of web pages. Cascading style sheets are good news for HTML purists who believe that style should be separate from content and structure.

What does "cascading" mean? The term "cascading" derives from the fact that multiple style sheets can be applied to the same Web page; when there are conflicting instructions, there is a specific set of rules that determine which style specification "wins".

Who developed CSS? The World Wide Web Consortium (W3C) first published its recommendations for style sheets in 1996, and they were first implemented by Internet Explorer 3.0. The specification is still evolving and is not fully and evenly supported by current Web browsers.


  • Greater typography and page layout controls. With style sheets, you can specify (among other things) font size, line spacing, letter spacing, indents, margins, and element positioning.
  • Style is separate from structure. HTML purists say that code should indicate the structure of a document, not its presentation. However, tags (like the <font> tag) go against this goal. Style sheets, when done correctly, mark the return to the original intention of HTML by removing presentation instructions from HTML and placing them in a separate, optional area.
  • Potentially smaller documents. Placing style information once, at the beginning of a document, instead of at every single place where style information is to apply, can cut down dramatically on the number of characters in an HTML document. Fewer characters mean smaller file sizes, which means faster download times.
  • Easier site maintenance. It is possible to link multiple HTML pages to a single style sheet. You can make style changes to thousands of web pages by editing a single file.


  • Poor Browser Support. Style sheet information is not supported in browser versions earlier than Microsoft Internet Explorer 3.0 or Netscape Navigator 4.0. Moreover, there is inconsistency in CSS support in later versions. There is a 9-page appendix in the Weasel book (pages 518–526) that documents this blotchy support.

  • Here are some strategies for effectively using style sheets today:
  • Close your tags! Even though many browsers are forgiving when you leave off end tags (like </P> and </LI>), many emerging technologies, like CSS, will not work properly without closing tags. To prepare for these emerging technologies, develop good habits today, and CLOSE YOUR TAGS!
  • Create documents that "degrade gracefully":
  • First, create a style-sheet-free site that is acceptable to your entire audience. Then, add style sheet information. Thus, you can improve your site for current browsers, while keeping it functional for older ones.


There are three basic ways to add style information to an HTML document:
  • Inline styles: Style information can be put directly into an HTML tag, like this:
    <H1 STYLE="color: red">This Heading will be red.</H1>
    However, this defeats the purpose of keeping style information separate. Only use inline styles to occasionally override higher-level rules. (For example: "I really want red here, even though I usually want purple.")
  • Embedded style sheet: A block of style information can be embedded in the HEAD of an HTML document using the <STYLE> </STYLE> container tag. This is an efficient way to specify the style of a single document.
  • External style sheet: The most powerful way to use styles is to collect style information in a separate text document, and then "load this information" into a document when a specific style is desired. In this way, stylistic changes can be made to multiple documents (for example, to this entire web tutorial) by editing a single style document. Powerful stuff!

Printable version of Index Card 41a

Printable version of Index Card 41b

Printable version of Index Card 41c

Printable version of Index Card 41d

View the source code for this document, and look in the <HEAD> section. You'll see some style sheet code. You'll be cutting and pasting this code momentarily, to do your first style sheet exercise!


On to the next lesson!
© 2001 Carol J.V. Fisher    All Rights Reserved