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

CHAPTER 9
Style Sheets

by Eric Ladd

In this chapter

What Are Style Sheets? 262

Why Style Sheets Are Valuable 264

Different Approaches to Style Sheets 264

Using Multiple Approaches 265

Linking to Style Information in a Separate File 266

Embedded Style Information 271

Inline Style Information 272

Tips for Style Sheet Users 274

Style Sheet Software Tools 277

What Are Style Sheets?

Two forces compete 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, italic, and typewriter styles.

Then, as graphical browsers became standard equipment, a greatly increased focus on presentation began. In particular, Netscape introduced 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. Not to be left out, Microsoft began producing its own browser—Internet Explorer—and with it, its own proprietary HTML extensions. Content authors, who could only watch the new tags emerge, were frequently left confused and frustrated because 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 indentation 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 style sheets—documents that provide specifications for how content should look onscreen. 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 W3C’s first stab at separating content and presentation was the Cascading Style Sheets, level 1 (CSS1) specification—a formal statement on how to specify style information. In May 1998, the W3C released Cascading Style Sheets, level 2 (CSS2) as a published recommendation, so you should adhere to that standard when preparing style sheets

---

Changes from CSS1 to CSS2

If you’ve developed style sheets that are valid under the CSS1 standard, you’ll be happy to learn that those style sheets are valid under CSS2 as well. The biggest changes on moving from CSS1 to CSS2 were in the areas of

•  Accessibility—CSS2 provides support for aural style sheets to be used when marking up content for speech- and sound-based browsers. Aural style-sheet properties give you control over volume, speech quality, pauses, cues, mixing of sounds, and spatial variations of sound (for example, differences that help you to determine where different voices are coming from in a room).

•  Internationalization—The Web’s user community is distributed throughout the world, and as more and more users emerge, it becomes important to support languages other than English. Specifically, CSS2 provides for differences in list numbering and quotation marks and for bidirectional text (for languages that are read right-to-left and not left-to-right).

The new features introduced in these areas have essentially no impact on style properties introduced in CSS1, so that’s why your CSS1 style sheets are also valid under CSS2.

Some subtle differences between CSS1 and CSS2 are worth noting, however. New features to CSS2 include

•  Properties that can take an inherit value, which says that an element should inherit the property from its parent element.

•  Style sheets for different media types (aural, print, Braille, projection, and so on); they are controlled by using the @import rule (which imports a style sheet from a given URL) or the @media rule.

•  A text-shadow property for doing drop-shadows behind text.

•  Support for paged media, which enables you to present a document in discrete pages rather than as a single, continuous page. Pagination is controlled by the @page rule.

•  An expanded font selection algorithm that allows for downloadable fonts.

•  Fixed positioning, which enables you to place an element in the browser window and not have it move from that position when the page is scrolled. This is similar to the idea of a “watermarked” background image that does not move when the page is scrolled, except the fixed-positioned content is presumably in the foreground of the document.

•  The capability to specify clipping regions, overflow, visibility, and minimum and maximum widths and heights in the visual formatting model.

---

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

Style sheets are collections of style information that are applied to plain text. Style information includes font attributes such as type size, special effects (bold, italic, underline), color, and alignment. Style sheets also provide 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 such as Microsoft Word have been making use of user-defined style for a number of years. Figure 9.1 shows a Word style definition in the Style dialog box. Notice how the style accounts for many of the presentation attributes previously mentioned.

FIGURE 9.1  Word processors enable users to store content presentation attributes together as a style.