●

8.7 Definition Lists

The Elements of Styles

Style Syntax

Style Properties

Tag-less Styles: The Tag

Applying Styles to Documents

Style sheets are the way publishing professionals manage the overall "look" of their publications -

backgrounds, fonts, colors, and so on - from a single page to huge collections of documents. Most desktop publishing software supports style sheets, as do the popular word processors. All desktop publishers and graphic designers worth their salt are out there making web pages. So the cry-to-arms was inevitable: "Whaddaya mean HTML has no style sheets?!"

From its earliest origins, HTML focused on content over style. Authors are encouraged to worry about providing high quality information, and leave it to the browser to worry about presentation. We strongly urge you, too - as we do throughout this book - to adopt that philosophy in your HTML

documents, especially those destined for the World Wide Web. Don't mistake style for substance.

However, while use of the HTML tag and related attributes like color produce acute presentation effects, style sheets, when judiciously applied, bring consistency and order to whole document collections, as well as to individual documents. Remember, too, that presentation is for the benefit of the reader. Even the original designers of HTML understood the interplay between style and readability. For instance, readers can quickly identify section heads in a document when they are enclosed in header tags like , which the modern browsers present in large and often bold type.

Style sheets extend that presentation with several additional effects, including colors and a wider selection of fonts, so that readers can even better distinguish elements of your document. But most importantly, style sheets let the HTML author control the presentation attributes for all the tags in a document - for a single document or a whole collection of many documents, and from a single master style sheet.

In early 1996, the World Wide Web Consortium put together a draft proposal defining Cascading Style Sheets (CSS) for HTML. This draft proposal quickly matured into a recommended standard, which the commercial browser manufacturers were quick to exploit. Internet Explorer 4.0, introduced in the fall of 1997, implements most of the W3C standard. Netscape Navigator has some support for style sheets in Version 4.0, which was introduced in the spring of 1997. Style is fast achieving parity with content on the World Wide Web.

In keeping with our philosophy of favoring real implementations over standards, we'll start by documenting style sheets as they currently work in the real world. At this writing, style sheets were supported by Internet Explorer 4.0 and Netscape 4.0. We know that browser support of style sheets will change faster than we can reprint this book, so we have created a separate "compliance document" that you can use to determine how style sheets are implemented by the latest releases of the browsers. You can find this document at
http://www.oreilly.com/catalog/html3/
. The information in this document should always be considered more timely and accurate than the information in this book.

Since we realize that eventual compliance with the W3C standard is likely, we'll cover all the components of the standard in this chapter, even if they are not yet supported by any browser. As always, we'll denote clearly what is real, what is proposed, and what is actually supported.

9.1 The Elements of Styles

At the simplest level, a style is nothing more than a rule that tells the browser how to display a particular HTML tag. Each tag has a number of properties associated with it, whose values define how that tag is rendered by the browser. A rule defines a specific value for one or more properties of a tag.

For example, most tags have a color property, the value of which defines the color used to display that tag. Other properties include font attributes, line spacing, margins, borders, and the like, which we describe in detail later in this chapter.

There are three ways to attach a style to a tag: inline styles, document-level styles, and external style sheets. You may use one or more style types in your documents. The browser either merges the style definitions from each style or redefines the style characteristic for a tag's contents. Styles from these various sources are applied to your document, combining and defining style properties that cascade from external style sheets through local document styles, ending with inline styles. This cascade of properties and style rules gives rise to the standard's name: Cascading Style Sheets.

We cover the syntactic basics of the three style sheet techniques here. We delve more deeply into the appropriate use of inline, document-level, and external style sheets at the end of this chapter.

9.1.1 Inline Styles: The style Attribute
The inline style is the simplest way to attach a style to a tag - just include a style attribute with the tag along with a list of properties and their values. The browser uses those style properties and values to render the contents of just this instance of the tag.

For instance, the following style tells the browser to display the level one header text, "I'm so bluuuuoooo!", not only in the

tag style characteristic of the browser, but also in the color blue and italicized (if the browser is capable):

I'm so bluuuuoooo! This type of style definition is called "inline" because it occurs with the tag as it appears in the document. The scope of the style covers the contents of that tag only. Since inline styles are sprinkled throughout your document, they can be difficult to maintain. Use the style attribute sparingly and only in those rare circumstances when you cannot achieve the same effects otherwise.

9.1.2 Document-level Style Sheets

The real power of style sheets dawns when you place a list of presentation rules within the head of an HTML document. Enclosed within their own end tags, so-called "document-level" style sheets affect all the same tags within that document, except for tags that contain an overriding inline style attribute.

; rarely omitted

Contains:

styles

Used in:

head_content

The tags is considered part of the style rules to be applied to the document. To be perfectly correct, the content of the

I'm so bluuuuoooo!

...

I am ba-loooooo, tooooo!

9.1.2.1 The type attribute

The type attribute defines the types of styles you are including within the tag. Cascading style sheets always carry the type text/css; JavaScript style sheets use the type text/javascript. You may omit the type attribute and hope the browser will figure out the kind of styles you are using. We prefer to include the type attribute so that there is no opportunity for confusion.
[JavaScript Style

Sheets, 13.4]

9.1.2.2 The media attribute

HTML documents can wind up in the strangest places. To help the browser figure out the best way to display your documents, you might want to include the media attribute. The value of this attribute is the media for which this document is intended. The default value is screen; other defined values include tty, tv, projection, handheld, print, braille, aural, and all. A document intended for multiple media can use a quote-enclosed, comma-separated list of media types as the value of this attribute.