Cascading Style Sheets (CSS)

Because the CSS standard is still in development, expect some further changes before the standard is finalized. Rather than delve into the details in the current draft, we discuss a few of its key concepts that are unlikely to change in order to give you an appreciation of its design and capabilities.

One of CSS's most fundamental features is its assumption that multiple, interlinked style sheets can cascade. That is, authors can attach preferred style sheets to a Web document, yet readers can associate their own personal style sheets to the same documents, which can correct for human or technological handicaps. Thus, a print-handicapped reader can override an author's type distinctions between 10 and 12 point sizes to accommodate that reader's need for a point size no smaller than 40. Likewise, local limitations on resolution or display area may override an author's layout and type style selections.

Basically, CSS contains a set of rules to resolve style conflicts that arise from applying multiple style sheets to the same document. Because conflicts are bound to arise, some method of resolution is essential to proper behavior when the content of a document is rendered on a user's machine.

The specifics of these rules are still in flux, but they depend on the assignment of a numeric weight to represent the relative importance of each style item. With this method, you assign a value between 1 and 100 to a style element referenced in a style sheet. To prevent users' preferences from being completely overridden by a document's author, we strongly encourage authors never to set their weights as high as 100. If authors use a value lower than 100, it leaves the door open for users to override settings at will. This ability to override some style conventions is especially helpful for visually handicapped users who may require all characters to be at least 36 point or for users who need special text-to-speech settings. After all referenced style sheets and their alterations are loaded into memory, conflicts are resolved by applying the definition with the greatest weight, and ignoring all others.

For example, assume that a document's author creates a style for a level one heading, <H1>, so that it uses the color red and assigns it a weight of 75 percent. Further assume that the reader has defined a style for <H1>, colored blue with a weight of 55 percent. In this case, a CSS-enabled browser uses the author's style definition because it has the greater weight.

You can incorporate CSS into a Web document by using one or more of four methods. The following code fragment illustrates all four of these methods:

<HEAD>

<TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://www.style.org/cool" TITLE="Cool">

<STYLE TYPE="text/css">

@import "http://www.style.org/basic"

H1 { color: blue }

</STYLE>

</HEAD>

<BODY>

<H1>Headline is blue</H1>

<P STYLE="color: green">While the paragraph is green.

</BODY>

Here you can see all four CSS implementation methods:

* Using the <LINK> tag to link an external style sheet (line 3 of the preceding listing).

* Using <STYLE> inside the <HEAD> section (lines 5 through 8).

* Importing a style sheet using the CSS @import notation (line 6).

* Using the STYLE attribute in an element inside the <BODY> section (line 12).

Other benefits of the CSS implementation of style sheets include:

* Grouping:

Multiple style elements or definitions can be grouped together, as follows:

H1 {font-size: 12pt; line-height: 14pt; font-family: helvetica}

* Inheritance:

Any nested tags inherit the style sheet definitions assigned to the parent tag, unless the same elements are explicitly redefined.

For example, in the HTML line

<H1>The headline <EM>is</EM> important!</H1>

if <H1> is defined to display in red, then the text enclosed by <EM> also appears in red, unless <EM> is specifically defined to use another color.

* Alternative Selectors:

Post-2.0 HTML includes both CLASS and ID attributes for most HTML tags. You can use these attributes to define subsets or alternative sets of tags that a style sheet defines. For example:

<HEAD>

<TITLE>Title</TITLE>

<STYLE TYPE="text/css">

H1.punk { color: #00FF00 }

</STYLE>

</HEAD>

<BODY>

<H1>Not green</H1>

<H1 CLASS=punk>Way too green</H1>

</BODY>

* Context-Sensitive Selectors:

CSS also supports context-based style definition. This is best described using an example:

<STYLE>

UL UL LI { font-size: small }

UL UL UL LI { font-size: x-small }

</STYLE>

Following this notation, the second and third nested unnumbered lists (<UL>) use increasingly smaller font sizes.

* Comments:

You can add comments inside a style sheet by using the common C language syntax: /* comment */.


Previous Section | Next Section | For HTML, Style Is Its Own Reward! | Extras TOC

E-Mail: HTML for Dummies at html4dum@lanw.com


URL: http://www.lanw.com/html4dum/h4d3e/extras/ch11sec3.htm 
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James. 
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]