Chapter 14

HTML Style Sheets

by Eric Ladd

• Introduction to Style Sheets
  • What Are Style Sheets
  • Why Style Sheets Are Valuable
  • Different Approaches to Style Sheets
• Linking to Style Information in a Separate File
  • Setting Up the Style Information
  • Using the <LINK> Tag
• Embedded Style Information
  • Using the <STYLE> Tag
  • Setting Up the Style Information
  • Respecting "Style Sheet-Challenged" Browsers
• Inline Style Information
  • Other Tags that Take the STYLE Attribute
  • The <SPAN> Tag
• Using Multiple Approaches
• Tips for Style Sheet Users
  • Harnessing Inheritance
  • Grouping Style Information
  • Creating Tag Classes
• The Future of Style Sheets
  • Wider Support
  • User-Defined Style Sheets
  • Other Style Sheet Standards

There are two competing forces in Web page authoring: content and presentation. When HTML was first released, the tags were largely focused on content and they descriptively defined the various parts of a document: a heading, a paragraph, a list, and so on. Over time, instructions were added to help with presentation issues at the font level. These instructions included tags for boldface, italics, and typewriter styles.

Then, as graphical browsers became standard equipment, there was a greatly magnified focus on presentation. In particular, Netscape began introducing proprietary extensions to HTML that only its browser could render properly. These extensions generally produced attractive effects on pages and users began using Netscape en masse. This compelled content authors to write to the Netscape Navigator browser-a practice that often produced dreadful results on other browsers.

Not to be left out, Microsoft began producing its own browser-Internet Explorer-and with it, its own proprietary HTML extensions. This started the ever-escalating battle between Netscape and Microsoft. Each company tried to outdo the other in each new beta release of its browser. The content authors, who would only watch the battle, were frequently left confused and frustrated since it was hard to tell which browser to write for and how long it would be before the next new set of bells and whistles became available.

As designers push for more control over page attributes, such as and line spacing, the evolution of HTML stands at a fork in the road. One path leads to the continued introduction of proprietary tags by the people making the browsers-a path that will lead HTML into even muddier waters. The other path leads to an explicit separation of content and presentation by introducing HTML style sheets-documents that provide specifications for how content should look on screen. By separating these two otherwise competing forces, HTML is free to evolve as a language that describes document content, and will be less susceptible to seemingly endless extensions by browser software companies.

The World Wide Web Consortium is already pushing the idea of style sheets. It has reserved a tag for embedding style information within an HTML document. It is also considering proposals for a general style sheet language that could be used to describe how a document should look, just as HTML describes what the page contains. This chapter surveys the approaches to style sheets as they have been proposed and, in the case of Microsoft Internet Explorer 3, as they have been implemented.

Introduction to Style Sheets

Before looking at the different ways to build style information into your pages, it is helpful to review some of the basics behind the concept of a style sheet.

What Are Style Sheets

Style sheets are collections of style information that is applied to plain text. Style information includes font attributes such as type size, special effects (bold, italics, underline), color, and alignment. It also provides broader formatting instructions by specifying values for quantities such as line spacing and left and right margins.

Style sheets are not really a new concept-word processing programs like Microsoft Word have been making use of user-defined style for a number of years. Figure 14.1 shows a Word style definition in the Style dialog box. Notice how the style accounts for many of the presentation attributes mentioned previously.

Figure 14.1 : You can define your own styles in Microsoft Word and apply them to highlighted text.

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 on screen. Other benefits of style sheets include:

• Central repositories of style information  If you're using a standard set of styles on all of your pages, you can store the corresponding style information in one file. This way, if you have to edit the style information, you just have to make the change in one place instead of in every file.
• Little-to-no new HTML to learn  With style information being stored in style sheets, there should be virtually no need for the introduction of new HTML tags 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. By assigning specific style information to logical style tags, Web page authors can be assured that their content will look exactly the same on every browser.

Different Approaches to Style Sheets

The World Wide Web Consortium is advocating the "Cascading Style Sheet" proposal for implementing style sheets. Cascading refers to the fact that there is 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 since the rules would give the browser a way to determine which style is given precedence.

Even though the style sheet specification is (as of this writing) still in draft form, Microsoft Internet Explorer 3 is already able to make use of the approaches proposed in the specifications. In fact, Internet Explorer 3 supports styles in each of three different ways:

• Embedded styles  Style information is defined in the document head using the <STYLE> and </STYLE> tags.
• Linked styles  Style information is read from a separate file that is specified in the <LINK> tag.
• Inline styles  Style information is placed inside an HTML tag and applies to all content between that tag and its companion closing tag. For example, you could left-indent an entire paragraph one half-inch by using the <P STYLE="margin-left: .5 in"> tag to start the paragraph.

Internet Explorer 3 will be used to highlight these three approaches as the chapter progresses.

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. In fact, 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: 10 pt Palatino; color: red; margin-left: 0.5in}
H1 {font 18 pt Palatino; color: blue}
H2 {font 16 pt Palatino; color: AA4D60}

The first line sets the body text to 10-point-high Palatino type that is rendered in red with a
one-half inch left margin. The second line redefines the level 1 heading to 18-point-high Palatino type that is rendered in blue, and the third line sets the level 2 heading to 16-point-high Palatino type, rendered in the mauve color that is represented by the hexadecimal triplet "AA4D60."

Remember that the syntax for specifying a characteristic has the form

{characteristic: value}

Multiple characteristic/value pairs should be separated by semicolons. For example:

P {font: 12 pt Times; line-height: 14 pt; color: FF00FF; text-indent: .25 in}

The cascading style sheet specification lets you specify more than just fonts, typefaces, and colors. Table 14.1 lists the different style attributes you can assign to a file containing style information.

You can see from the table that you get control over a large number of presentation characteristics-certainly more than you get with HTML tags alone.

Using the <LINK> Tag

Once you've created your style sheet file, save it with a .Css extension and place it on your server. Then you can reference it by using the <LINK> tag in the head of each of your HTML documents, as follows:

<HEAD>
<TITLE>A Document that Uses Style Sheets</TITLE>
<LINK REL=STYLESHEET HREF="styles/sitestyles.css">
</HEAD>

The REL attribute describes the relationship of the linked file to the current file-namely that the linked file is a stylesheet. HREF specifies the URL of the style sheet file.

Embedded Style Information

Figure 14.2 shows the Microsoft corporate page, which makes use of an embedded style sheet. The style information is stored in the document head, as shown in the HTML source listing in Figure 14.3. The structure of the style information takes the same form that you saw for setting up style information in a separate file: an HTML tag name, followed by curly braces containing the style characteristics. For example, regular text in the document body is 9-point Arial, colored according to the hexadecimal triplet 000000, whereas text marked up with the <BIG> tag is rendered in 10-point Arial on a background colored with the RGB triplet CCCC66.

Figure 14.2 : Microsoftís Web site makes use of style sheets to create a unique look.

Figure 14.3 : Microsoft embeds style sheet information right into the head of each document.

Using the <STYLE> Tag

As you can see in Figure 14.3, embedded style information is placed between the <STYLE> and </STYLE> tags. When the World Wide Web Consortium released HTML 3.2, it reserved the use of these tags specifically for the purpose of embedded style information.

The TYPE attribute tells a browser what type of style information setup is being used. This allows for some flexibility in the implementation of other style information specification schemes in the future. This also makes it easier for browsers that do not support style sheets to ignore the style information between the two tags.

Setting Up the Style Information

Style information of the MIME type text/css is set up the same way that style information is set up in a linked style sheet file. The first entry on each line is the keyword from an HTML tag, followed by a list of characteristic/value pairs enclosed in curly braces.

Respecting "Style Sheet-Challenged" Browsers

The style information you see in Figure 14.3 is enclosed in comment tags (<!--and-->) so that browsers that do not understand style sheets will ignore the style information, rather than presenting it on-screen. Another way you can give style sheet-challenged browsers a heads-up is to include the TYPE="text/css" attribute in the <STYLE> tag.

Inline Style Information

Inline styles can be specified inside an HTML tag. The style information given applies to the document content up until the defining tag's companion closing tag is encountered. Thus, with the following HTML

<P STYLE="text-align: center; color: yellow">
Yellow, centered text
</P>
<P>
Back to normal
</P>

the text "Yellow, centered text" will be centered on the page and colored yellow. This style applies up until the </P> tag, at which point the browser reverts back to whatever style it was using before the inline style (see Figure 14.4).

Figure 14.4 : Inline styles only apply over the effect of the tag for which theyíre defined.

Other Tags that Take the STYLE Attribute

You saw in the example that the <P> tag is able to take the STYLE attribute to define an inline style. Many other tags can take the style attribute as well, including the following:

• <DIV>
• <H1>-<H6> (the heading styles)
• <UL> and <OL>
• <LI>
• <BODY>

The <SPAN> Tag

For those times when you want to apply a style to part of a document that is not nicely contained between two tags, you can use the <SPAN> and </SPAN> tags to set up the part of the document that is to have the style applied. You assign style characteristics to the area set up by the <SPAN> tag by using the STYLE attribute as in the example with the <P> tag above.

As an example of how you might use the <SPAN> tag, consider the following HTML:

<H2>Favorite Computer Games</H2>
<OL>
<SPAN STYLE="font-weight: bold; font-style: italics">
<LI>You Don't Know Jack</LI>
<LI>Doom</LI>
<LI>Wolfenstein 3D</LI>
</SPAN>
<LI>Solitaire</LI>
<LI>Freecell</LI>
</OL>

The code in the example produces the screen you see in Figure 14.5. Note in the figure that the bold italics prescribed in the <SPAN> tag apply only to the first three items in the list since the </SPAN> tag occurs after the third item.

Figure 14.5 : The <SPAN> tag enables you to determine the extent of the style informationís effect in your document.

Using Multiple Approaches

You aren't limited to using just one of the style sheet approaches that have been described. In fact, you can use all three simultaneously if needed. One case in which you may want to do this is on a corporate site where you have the following:

• Global styles  Certain styles that will be used on every page are best stored in a single style sheet file and linked to each page with the <LINK> tag.
• Sub-section styles  Large corporate sites typically have many subdivisions, each with its own look and feel. Styles to support a subdivision's look can be stored between the <STYLE> and </STYLE> tags in the head of each document in the subdivision.
• Page-specific styles  If you need to make a small deviation from your chosen global or sub-section styles, you can use an inline style to make the change right where you want it.

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.

The thing you have to remember when using multiple approaches is style precedence. Recall that the idea behind a cascading style sheet is that there is a set of rules that browsers apply, 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.

Tips for Style Sheet Users

Even though style sheets are relatively new, Web authors are already coming up with some good rules of thumb for implementing them. The next few sections share some of these helpful hints.

Harnessing Inheritance

Inheritance refers to the fact that HTML documents are essentially set up as hierarchies, and that styles applied at one level of the hierarchy necessarily apply to all subordinate levels as well. This means that if you assign style information inside of a <UL> tag, the information also applies to all of the items in the unordered list because the <LI> tags are subordinate to the <UL> tag.

You can make broader use of this idea by setting up as much common style information in the <BODY> tag as you can. Because every tag between <BODY> and </BODY> is subordinate to the <BODY> tag, these tags will inherit the style information you specify in the <BODY> tag, and you should be spared from having to repeat it throughout the rest of the document.

Grouping Style Information

If you want to assign the same style characteristics to a number of tags, you can do so in just one line, rather than using a separate line for each tag. For example, if you want all three kinds of links-unvisited, visited, and active-to be rendered in the same style, you can list them all individually

A:link {font-size: 12 pt; font-weight: bold; font-decoration: underline}
A:visited {font-size: 12 pt; font-weight: bold; font-decoration: underline}
A:active {font-size: 12 pt; font-weight: bold; font-decoration: underline}

or you could define them all at once

A:link A:visited A:active {font-size: 12 pt; font-weight: bold; 
font-decoration: underline}

Either set of code will make all hypertext links appear in 12-point type that is bold and underlined.

You can also group style information that is applied to just one tag. For example, if you had redefined your level 2 headings as

H2 {font-size: 16 pt; line-height: 18 pt; font-family: "Helvetica"; 
font-weight: bold}

you could express the same thing as

H2 {font: 16pt/18pt bold "Helvetica"}

and save yourself a bit of typing.

Creating Tag Classes

The proposed style sheet specifications allow you to subdivide a tag into named classes and to specify different style information for each class. For example, if you want three different colors of unvisited links, you can set them up as

A:link.red {color: red}
A:link.yellow {color: yellow}
A:link.fuschia {color: fuschia}

The period and color name that follow each A:link sets up a class of the A:link tag. The class name is whatever follows the period. You use the class names in the <A> tag to specify which type of unvisited link you want to create, as follows:

Here's a <A CLASS="red" HREF="red.html">red</A> link!
And a <A CLASS="yellow" HREF="yellow.html">yellow</A> one ...
And a <A CLASS="fuschia" HREF="fuschia.html">fuschia</A> one!

The Future of Style Sheets

The idea of style sheets is not exactly new, but it is a fairly new capability that content authors can use on Web pages. Even so, the first implementation of Web style sheets promises to elevate Web content presentation to impressive new heights.

Just as HTML has evolved quickly over its brief existence, you should expect to see style sheet capabilities evolve as well. This chapter concludes with a few sections that discuss some of the directions in which this evolution is likely to go.

Wider Support

Probably the greatest impediment to style sheets becoming widely accepted right from the onset is that so few browsers support them. As of this writing, Internet Explorer 3 is the only mainstream browser that supports the cascading style sheet draft specification. This, of course, obliges Netscape to update the Netscape Navigator to be able to process style information, too. You should expect to see full style sheet support in Netscape Navigator 4.0.

In the meantime, you can continue to use Internet Explorer 3 to view pages created with style sheets, or you can try out one of the following browsers:

• Arena, the World Wide Web Consortium's test browser, partially supports the style sheet specification
• Emacs-w3
• Tamaya, a browser/editor software package (to be repackaged as Amaya by the World Wide Web Consortium)
• Lexicon

For more information on Arena and Amaya, visit the World Wide Web Consortium's site at http://www.w3.org/. To learn more about Emacs-w3, consult http://www.cs.indiana.edu/elisp/w3/docs.html. The Web site at http://www.cs.ucl.ac.uk/staff/b.rosenberg/lex/index.html can tell you more about Lexicon.

User-Defined Style Sheets

Users will be able to get into the act in the future and define their own style sheets. User-defined styles will override browser defaults, but will probably be overridden by author-specified styles.

Other Style Sheet Standards

Currently, the World Wide Web Consortium's Cascading Style Sheet proposal (CSS level 1 or CSS1) is the only style sheet proposal that is being implemented. There is another proposal for style sheets, though. The Document Style Semantics and Specification Language (DSSSL) has been proposed by the International Standards Organization as a means of defining style sheet languages (much the same way as SGML is used to define markup languages like HTML). Efforts are now underway to identify a subset of DSSSL that would be an appropriate basis for a common Web style sheet language