By Mark Gibbs
Network World, 7/27/98

The World Wide Web Consortium (W3C) recently elevated Cascading Style Sheets Level 2 (CSS2) to Recommendation status, a quick move that indicates just how important this specification is to Web developers.

CSS2 was a Proposed Recommendation for only two months. The W3C raises technologies to Recommendation status if they are stable, contribute to interoperability, are supported widely and achieve consensus among consortium members.

The CSS specification in general makes it possible for authors and readers to attach style specifications such as fonts, colors, attributes and spacing to HTML documents. Intranet managers, for example, can place a CSS file on a Web server to provide a corporate style standard for the entire organization to use.

Many Web authoring and editing tools and browsers support CSS2's predecessor, CSS1, which has been a W3C recommendation since December 1996. CSS2, which should begin showing up - at least in part - in the next wave of software releases brings more features and functionality than CSS1. Understanding the differences between the two, which are compatible, starts by knowing CSS1.

BASIC TRAINING
The term "cascading" refers to the fact that multiple style sheets can be used for an HTML document. An author can attach a style sheet to an HTML document, for example, but a user might prefer a personal style sheet that adjusts for human or technological handicaps. In addition to setting style, the CSS specification defines rules for resolving conflicts between different style sheets applied to a single document.

The W3C designed the CSS language so people would be able to understand it easily. It has a similar layout to HTML tags, and the keywords are common desktop publishing terms.

Simple style tags, for example, make it possible to change a browser's heading display from the default to something like red italic type in the Times font. The opening and closing style tags are <STYLE type="text/css"> and </STYLE>, respectively.

The type fonts are enclosed in comment tags to ensure that browsers not complying with CSS can display text in the default mode.

You can use CSS directives in four ways. First, you can include the CSS in a document's head section. Second, you can specify style using an in-line CSS. In in-line CSS, you embed the specification in the tag.

These ways of specifying CSS miss the opportunity of making publishing simpler by keeping rendition separate from content. To achieve this, CSS directives are stored in an external file. This external file is the basis of the third and fourth ways of specifying style sheet directives.

To use an external file with a Web document, you can either include a link tag in the head section or an import directive. Note, however, that under Netscape Communications Corp.'s Communicator 4.0 and Microsoft Corp.'s Internet Explorer 4.0 browsers the import tag doesn't work reliably. You should either avoid using the import tag or, if you can't resist being out on the edge, test your pages thoroughly.

DIRECT ORDERS
The various properties of a style may have more than one attribute.

As shown in the following tag, for example, you can tell the browser which font to use in case the first one specified isn't available: H1 { font-family: Times, Garamond, serif; font-style: bold; color:red }. In this example, "serif" is a catchall specifying that if the Times and Garamond fonts aren't available, the browser should use any serif font. (If that fails, the browser will use the default sans serif font if available.)

In addition to specifying multiple values, which works for most attributes, you can group base specifications and then use extensions for attributes specific to each style. You also can create classes.

A new class is denoted by a period preceding a name.

Identifiers, denoted by a #, operate identically to classes but apply to individual items. This technique lets scripting languages change the style of individual items dynamically. For example, a document explaining how to perform a sequence of actions, such as assembling furniture, could be designed so that each is highlighted in sequence when the mouse is clicked.

SECOND IN COMMAND
CSS2 builds on these basic CSS1 features. It offers improved printing of Web pages, positioning and layered elements, improved internationalization and downloadable fonts. What's more, it also supports control-over-audio rendition, including voice, pitch and stereo positioning.

Key to CSS2's enhancements is support for 10 media types, including sound, print and computer screen. This allows content rendition to achieve the best results for any given output media. For example, the following code in a document body would produce small black text with serifs on paper and larger sans serif text in blue on a computer monitor:

@media print {
BODY { font-size:10pt, font-family:Times; font-style:bold; color:black }
}
@media screen {
BODY { font-size:12pt, font-family:Arial, color:blue}
}

CSS2 also introduces cursors. Authors can specify what the cursor will look like in different areas of a Web page and when being used for various functions, such as being over a link or resizing an object. CSS2 also supports outlining of text and objects such as buttons, tables and active form fields.

Lastly, CSS2 radically changes font handling. Where CSS1 relied on a limited number of font properties to describe the content author's intentions, CSS2 allows developers to specify minute details of font characteristics.

The speed with which CSS2 progressed through the W3C process indicates how important its features are to the market and makes it safe to say that this spec is going to be part of your future.