Authors: Chuck Musciano Bill Kennedy

HTML The Definitive Guide (88 page)

Chapter 8

Formatted Lists

8.8 Appropriate List Usage

In general, use unordered lists for:

Hotlists and other link collections

●

Short, nonsequenced groups of text

●

Emphasizing the high points of a presentation ●

In general, use ordered lists for:

Tables of content

●

Instruction sequences

●

Sets of sequential sections of text

●

Assigning numbers to short phrases that can be referenced elsewhere ●

In general, use definition lists for:

Glossaries

●

Custom bullets (make the item after the

●

tag an icon-sized bullet image) Any list of name/value pairs

●

8.7 Definition Lists

9. Cascading Style Sheets

Chapter 9
9. Cascading Style Sheets
Contents:

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