Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Why Style Sheets Are Valuable

Simply put, style sheets separate content and presentation. Apart from freeing up HTML to develop as a content description language, it gives Web page designers precise control over how their content appears onscreen. Other benefits of style sheets include

•  Central repositories of style information—If you use a standard set of styles on all your pages, you can store the corresponding style information in one file. This way, if you have to edit the style information, you have to make the change in only one place instead of in every file.

•  Little-to-no new HTML to learn—With style information stored in style sheets, virtually no new HTML tags should be needed for the purposes of formatting. This promises to reduce the confusion that often arises out of browser-specific extensions to HTML.

•  Consistent rendering of content—Browsers vary slightly in how they render content, especially the logical text styles (emphasized text (<EM>), keyboard input (<KBD>), and so on). By assigning specific style information to logical style tags, Web page authors can be assured that their content will look the same on every browser.

Different Approaches to Style Sheets

The W3C is advocating the Cascading Style Sheet proposal for implementing style sheets. Cascading refers to a certain set of rules that browsers use, in cascading order, to determine how to use the style information. Such a set of rules is useful in the event of conflicting style information because the rules would give the browser a way to determine which style is given precedence.

The CSS2 recommendation supports three ways of including style information in a document. These approaches include

•  Linked styles—Style information is read from a separate file that is specified in the <LINK> tag.

•  Embedded styles—Style information is defined in the document head using the <STYLE> and </STYLE> tags.

•  Inline styles—Style information is placed inside an HTML tag and applies to all content between that tag and its companion closing tag. You can left-indent an entire paragraph one-half inch, for example, by using the <P STYLE=“margin-left: .5 in”> tag to start the paragraph. If the content to which you want to apply style information isn’t conveniently grouped by a set of container tags, you can also use the <SPAN> and </SPAN> tags to do the same job.

Using Multiple Approaches

You aren’t limited to using only one of the described style sheet approaches. You can use all three simultaneously if needed. One case in which you may want to do this is on an intranet site where you have the following:

•  Global styles—Certain styles used on every page are best stored in a single style sheet file and linked to each page with the <LINK> tag. This might apply to styles mandated as a corporate standard, such as the use of a plain white background and a single typeface.

•  Subsection styles—Intranet sites typically have many subdivisions, each with its own look and feel. To support a subdivision’s look, you can store styles between the <STYLE> and </STYLE> tags in the head of each document in the subdivision. The subdivisions might represent different business units within the corporation, or it can just be a set of related documents, such as product specs or white papers.

•  Page-specific styles—If you need to make a small deviation from your chosen global or subsection styles, you can use an inline style to make the change where you want it. You might use a page-specific style if a page in one of your subdivisions has particular presentation requirements. A key passage in a white paper, for example, might be highlighted by rendering it in bold and in color.

However, you shouldn’t use all three approaches in the same document just for the sake of doing it. You should seek to optimize your use of style sheets by choosing the approach or combination of approaches that enables you to apply the styles you want, where you want them, without a lot of unnecessary code.

Remember style precedence when using multiple approaches. The idea behind a Cascading Style Sheet is that browsers apply a set of rules in cascading order to determine which style information takes precedence. You need to be aware of these rules so that you do not produce unintended style effects on your pages. In general, you’ll be fine if you remember the following:

•  Inline styles override both linked style sheets and style information stored in the document head with the <STYLE> tag.

•  Styles defined in the document head override linked style sheets.

•  Linked style sheets override browser defaults.

Keeping these rules in mind will make troubleshooting your style sheet setup much easier.

---

NOTE:  One important point for content authors to remember is that users can develop style sheets of their own. CSS2 supports the “!important” keyword in the specification of any property, which enables the user’s style sheet to override the specification in the author’s style sheet.

---

Linking to Style Information in a Separate File

One important thing to realize is that you don’t have to store your style sheet information inside each of your HTML documents. If you anticipate applying the same styles across several HTML pages, it is much more efficient for you to store the style information in one place and have each HTML document linked to it. This makes it much easier to change the formatting of all your pages by changing the style sheet instead of changing every page.

Setting Up the Style Information

To set up a linked style sheet, you first need to create the file with the style information. This takes the form of a plain-text file with style information entries. Each entry starts with an HTML tag, followed by a list of presentation attributes to associate with the rendering of the effect of that tag. Some sample lines in a style sheet file might look like

BODY {font: 12 pt New Baskerville; color: navy; margin-left: 0.25in}
H1 {font 18 pt Arial; color: red}
H2 {font 16 pt Arial; color: CC3366}

The first line sets the body text to 12-point New Baskerville type rendered in navy blue with a one-quarter inch left margin. The second line redefines the level 1 heading to 18-point Arial type rendered in red, and the third line sets the level 2 heading to 16-point Arial type, rendered in the color represented by the hexadecimal triplet “CC3366.”