41. INTRODUCTION TO CASCADING STYLE SHEETS

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.

• 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!