Section 8.1. The Elements of Styles | Data Networks: Routing, Security, and Performance Optimization

8.1. The Elements of Styles

At the simplest level, a style is nothing more than a rule the browser follows to render a particular HTML or XHTML tag's contents. ^[*] Each tag has a number of style 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 can have a color property, the value of which defines the color in which the modern GUI browser should display the contents of the tag. Other properties include fonts, line spacing, margins, borders, sound volume, and voice, which we describe in detail later in this chapter.

^[*] We explicitly avoided the term display here because it connotes visual presentation, whereas the CSS2 standard works hard to suggest many different ways of presenting the tagged contents of a document.

There are three ways to attach a style to a tag: inline, on the document level, or through the use of an external stylesheet. You may use one or more stylesheets for 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 stylesheets through local document styles, and 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 stylesheet techniques here. We delve more deeply into the appropriate use of inline, document-level, and external stylesheets at the end of this chapter.

8.1.1. Inline Styles: The style Attribute

The inline style is the simplest way to attach a style to a tagjust 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 that tag.

For instance, the following style tells the browser to display the level-1 header text, "I'm so bluuuuoooo!", not only in the <h1> tag style, but also colored blue and italicized:

 <h1 style="color: blue; font-style: italic">I'm so bluuuuoooo!</h1>

Inline styles can be difficult to maintain, because they add more contents to their tags' definitions, making them harder to read. Also, because they have only a local effect, they must be sprinkled throughout your document. Use the inline style attribute sparingly and only in those rare circumstances when you cannot achieve the same effects otherwise .

8.1.2. Document-Level Stylesheets

The real power of stylesheets becomes more evident when you place a list of presentation rules at the beginning of your HTML or XHTML document. Placed within the <head> and enclosed within their own <style> and </style> tags, document-level stylesheets affect all the same tags within that document, except for tags that contain overriding inline style attributes. ^[*]

^[*] XHTML-based document-level stylesheets are specially enclosed in CDATA sections of your documents. See section 16.3.7 in Chapter 16 for details.

<style>

Function	Defines a document-level stylesheet
Attributes	`dir, lang, media, title, type`
End tag	`</style>` ; rarely omitted in HTML
Contains	styles
Used in	head_content

Everything between the <style> and </style> tags is considered part of the style rules that the browser is to apply when rendering the document. Actually, the contents of the <style> tag are not HTML or XHTML and are not bound by the normal rules for markup content. The <style> tag, in effect, lets you insert foreign content into your document that the browser uses to format your tags.

For example, a styles-conscious browser displays the contents of all <h1> tags as blue, italic text in an HTML document that has the following document-level stylesheet definition in its head:

 <head> <title>All True Blue</title> <style type="text/css">   <!--   /* make all level-1 headers blue in italics */   h1 {color: blue; font-style: italic}   --> </style> </head> <body> <h1>I'm so bluuuuoooo!</h1> ... <h1>I am ba-loooooo, tooooo!</h1>

8.1.2.1. The type attribute

Other types of stylesheets are available for HTML/XHTML besides CSS. Like the JavaScript stylesheets we describe in Chapter 12, they are not well supported, if at all, by the popular browsers, so we don't spend a lot of time on them in this book. Nonetheless, the browser needs a way to distinguish which stylesheet you use in your document. Use the type attribute within the <style> tag for that. All cascading stylesheets are of the type text/css ; JavaScript stylesheets use the type text/javascript . You may omit the type attribute and hope the browser figures out the kinds of styles you are using, but we suggest you always include the type attribute, so there is no opportunity for confusion. [JavaScript Stylesheets (Antiquated), 12.4]

8.1.2.2. The media attribute

HTML and XHTML documents can wind up in the strangest places these days, such as on cellular phones. To help the browser figure out the best way to render your documents, include the media attribute within the <style> tag. The value of this attribute is the document's intended medium, although it doesn't preclude rendering by other media. The default value is screen (computer display). Other values include tty (text only), tv (television), projection (theaters), handheld (PDAs and cell phones), print (ink on paper), braille (tactile devices), embossed (Braille printers), aural (audio; speech synthesis, for instance), and all (many different types of media).

If you want to explicitly list several types of media, instead of specifying all , use a quote-enclosed, comma-separated list of media types as the value of the media attribute. For example:

 <style type="text/css" media="screen,print">

tells the browser that your document contains CSS both for printing and for computer displays.

Be careful specifying media, because the browser cannot apply the styles you define unless the document is being rendered on one of your specified media. Thus, the browser would not apply our example set of styles designed for media="screen,print" if the user is, for instance, connected to the Web with a handheld computer.

How do you create different style definitions for different media without creating multiple copies of your document? The CSS2 standard lets you define media-specific stylesheets through its extension to the @import at-rule and through the @media at-rule, which we describe in section 8.1.5 later in this chapter.

8.1.2.3. The dir, lang, and title attributes

As with any HTML/XHTML element, you can associate a descriptive title with the <!-- <DEFANGED_STYLE> tag and specify the language and text-rendering direction with the title, lang , and dir attributes. [The dir attribute, 3.6.1.1] [The lang attribute, 3.6.1.2] [The id attribute, 4.1.1.4]

8.1.3. Style-Free Browsers

Certainly you noticed that, in the preceding document-level stylesheet example, we enclosed the contents of the <style> tag inside an HTML comment ( <!-- ) tag. Older, style-free browsers ignore the <style> tag, but then blithely go on to display its contents. Current browsers expect style rules to appear within an HTML comment and process them accordingly , whereas older browsers appropriately ignore the unrecognized <style> tag and go on to treat the comment tag and its intervening text normally. That works.

The order of the tags is very important. Here's the approach, which you may have noticed in our document-level style example:

 <style> <!--   h1 {color: blue; font-style: italic} --> </style>

Use a <style> tag, followed by an HTML comment, then followed by the document-level style rule(s). Finally, in order, close the comment and the </style> tag.

XHTML documents require a slightly different approach. In those documents, we enclose document-level styles in a CDATA section rather than an HTML comment tag. See section 16.3.7 for details.

Also, as they do for other attributes they don't recognize, the style-free browsers ignore inline style attributes and their values, so there are no detrimental effects in that regard for your document displays.

8.1.4. External Stylesheets

You can also place style definitions into a separate document (a text file with the Multipurpose Internet Mail Extension, or MIME, type of text/css ) and import this external stylesheet into your document. Use the same stylesheet for other documents in your collection, too, even entire collections of documents, to achieve a consistent look and feel. Because an external stylesheet is a separate file and the browser loads it over the network, you can store it anywhere , reuse it often, and even use others' stylesheets.

For example, suppose we create a file named gen_styles.css containing the following style rule:

 h1 {color: blue; font-style: italic}

For each and every one of the documents in our collections, we can tell the browser to read the contents of the gen_styles.css file, which in turn colors all the <h1> tag contents blue and renders the text in italic. Of course, that is true only if the user's machine is capable of these style tricks, she's using a styles-conscious browser, and the style isn't overridden by a document-level or inline style definition.

You can load external stylesheets into your document in two different ways: by linking them or by importing them.

8.1.4.1. Linked external stylesheets

One way to load an external stylesheet is to use the <link> tag within the <head> of your document:

 <head> <title>Style linked</title> <link rel=stylesheet type="text/css"       href="http://www.kumquats.com/styles/gen_styles.css"       title="The blues"> </head> <body> <h1>I'm so bluuuuoooo!</h1> ... <h1> I am ba-loooooo, tooooo!</h1>

Recall that the <link> tag creates a relationship between the current document and some other document on the Web. In this example, we tell the browser that the document named in the href attribute is a cascading stylesheet ( css ), as indicated by the type attribute. Referencing an external stylesheet in <link> requires that you include the href and type attributes. We also tell the browser explicitly, albeit optionally , that the file's relationship to our document is that it is a stylesheet , and we provide a title making it available for later reference by the browser. [The <link> Header Element, 6.7.2]

The stylesheet-specifying <link> tag and its required href and type attributes must appear in the <head> of a document. The URL of the stylesheet may be absolute or relative to the document's base URL.

8.1.4.2. Imported external stylesheets

The second technique for loading an external stylesheet imports the file with a special command (a.k.a. at-rule ) within the <style> tag:

 <head> <title>Imported stylesheet</title> <style type="text/css">   <!--     @import     url(http://www.kumquats.com/styles/gen_styles.css);     @import "http://www.kumquats.com/styles/spec_styles.css";     body {background: url(/books/1/469/1/html/2/backgrounds/marble.gif)}   --> </style> </head>

The @import at-rule expects a single URL for the network path to the external stylesheet. As shown in this example, the URL may be either a string enclosed in double quotes and ending with a semicolon or the contents of the url keyword, enclosed in parentheses, with a trailing semicolon. The URL may be absolute or relative to the document's base URL.

The @import at-rule must appear before any conventional style rules, either in the <style> tag or in an external stylesheet. Otherwise, the standard insists that the browser ignore the errant @import . By first importing all the various stylesheets, then processing document-level style rules, the CSS2 standard cascades: the last one standing wins. [URL property values, 8.4.1.4]

The @import at-rule can appear in a document-level style definition or even in another external stylesheet, letting you create nested stylesheets.

8.1.5. Media-Specific Styles

Besides the media attribute for the <style> tag, the CSS2 standard has two other features that let you apply different stylesheets, depending on the agent or device that renders your document. This way, for instance, you can have one style or whole stylesheet take effect when your document gets rendered on a computer screen and another set of styles for when the contents get punched out on a Braille printer. And what about those cell phones that access the Web?

Like the media attribute for the <style> tag that affects the entire stylesheet, you can specify whether the user's document processor loads and uses an imported stylesheet. Do that by adding a media-type keyword or a series of comma-separated keywords to the end of the @import at-rule. For instance, the following example lets the user agent decide whether to import and use the speech-synthesis stylesheet or a common PC display and print stylesheet, if it is able to render the specified media types:

 @import url(http://www.kumquats.com/styles/visual_styles.css) screen,print; @import "http://www.kumquats.com/styles/speech_styles.css" aural;

The @import CSS2 media types are the same as those for the <style> tag's media attribute, including all, aural, braille, embossed, handheld, print, projection, screen, tty , and tv .

Another CSS2 way to select media is through the explicit @media at-rule, which lets you include media-specific rules within the same stylesheet, either at the document level or in an external stylesheet. At the document level, as with @import , the @media at-rule must appear within the contents of the <style> tag. The at-rules may not appear within another rule. Unlike @import, @media may appear subsequent to other style rules, and its style-rule contents override previous rules according to the cascading standard.

The contents of @media include one or more comma-separated media-type keywords followed by a curly brace ( {} )-enclosed set of style rules. For example:

 body {background: white} @media tv, projection     {     body {background: yellow}     }

The yellow attribute to the @media at-rule causes the body's background color to display yellow, rather than the default white set in the general style rule, when the document is rendered on a television or projection screen (as specified by the tv and projection attributes).

8.1.6. Linked Versus Imported Stylesheets

At first glance, it may appear that linked and imported stylesheets are equivalent, using different syntax for the same functionality. This is true if you use just one <link> tag in your document. However, special CSS2-standard rules come into play if you include two or more <link> tags within a single document.

With one <link> tag, the browser should load the styles in the referenced stylesheet and format the document accordingly, with any document-level and inline styles overriding the external definitions. With two or more <link> tags, the browser should present the user with a list of all the linked stylesheets. The user then selects one of the linked sheets, which the browser loads and uses to format the document; the other linked stylesheets get ignored.

On the other hand, the styles-conscious browser merges, as opposed to separating, multiple @import ed stylesheets to form a single set of style rules for your document. The last imported stylesheet takes precedence if there are duplicate definitions among the stylesheets. Hence, if the external gen_styles.css stylesheet specification first tells the browser to make <h1> contents blue and italic, and then a later spec_styles.css tells the browser to make <h1> text red, the <h1> tag contents appear red and italic. And if we later define another colorsay, yellowfor <h1> tags in a document-level style definition, the <h1> tags are all yellow and italic. Cascading effects. See?

In practice, the popular browsers treat linked stylesheets just like imported ones by cascading their effects. The browsers do not currently let you choose from among linked choices. Imported styles override linked external styles, just as the document-level and inline styles override external style definitions. To bring this all together, consider this example:

 <html> <head> <link rel=stylesheet href=sheet1.css type=text/css> <link rel=stylesheet href=sheet2.css type=text/css> <style> <!--   @import url(sheet3.css);   @import url(sheet4.css); --> </style> </head>

Using the CSS2 model, the browser should prompt the user to choose sheet1.css or sheet2.css . It should then load the selected sheet, followed by sheet3.css and sheet4.css . Duplicate styles defined in sheet3.css or sheet4.css , and in any inline styles, override styles defined in the selected sheet. In practice, the popular browsers cascade the stylesheet rules as defined in the example order sheet1 through sheet4 .

8.1.7. Limitations of Current Browsers

All the popular browsers support the <link> tag to apply an external stylesheet to a document. None supports multiple, user-selectable <link> stylesheets, as proposed by the CSS2 standard. Instead, they treat the <link> stylesheets as they do @import or document-level styles, by cascading the rules.

Netscape version 6, but not earlier versions, Internet Explorer versions 5 and later, as well as all versions of Opera and Firefox, honor the @import and the @media at-rules, for both document-level and external sheets, allowing sheets to be nested.

Achieving media-specific styles through external stylesheets with earlier Netscape browsers is hopeless. Assume, therefore, that most people who have Netscape version 4 will render your documents on a common PC screen, so make screen the default. Then embed all other media-specific styles, such as those for print or Braille, within @media at-rules so that CSS-compliant agents properly select styles based on the rendering medium.

Another alternative is to create media-specific <style> tags within each document. Run, do not walk, away from that idea.

8.1.8. Style Comments

Comments are welcome inside the <style> tag and in external stylesheets, but treat them differently than HTML comments: stylesheets aren't HTML. Rather, enclose style comments between /* and */ markers, as we did in the example in section 8.1.2, earlier in this chapter. (Those of you who are familiar with the C programming language will recognize these comment markings .) Use this comment syntax for both document-level and external stylesheets. Comments cannot be nested.

We recommend documenting your styles whenever possible, especially in external stylesheets. Whenever the possibility exists that other authors may use your styles, comments make it much easier to understand your styles.

8.1.9. Style Precedence

You may import multiple external stylesheets and combine them with document-level and inline style effects in many different ways. Their effects cascade (hence the name, of course). You may specify the font type for our example <h1> tag, for instance, in an external style definition, whereas its color may come from a document-level stylesheet.

Stylesheet effects are not cumulative, however: of the many styles that may define different values for the same propertycolors for the contents of our example tag, for instancethe one that takes precedence can be found by following these rules, listed here in order:

Sort by origin: A style-defined "closer" to a tag takes precedence over a more " distant " style; an inline style takes precedence over a document-level style, which takes precedence over the effects of an external style.
If more than one applicable style exists, sort by class: A property defined as a class of a tag (see section 8.3, later in this chapter) takes precedence over a property defined for the tag in general.
If multiple styles still exist, sort by specificity: The properties for a more specific contextual style (see section 8.2.3, later in this chapter) take precedence over properties defined for a less specific context.
If multiple styles still exist, sort by order: The property specified latest takes precedence.

The relationship between style properties and conventional tag attributes is almost impossible to predict. For instance, stylesheet-dictated background and foreground colorswhether defined externally, at the document level, or inlineoverride the various color attributes that may appear within a tag. But the align attribute of an inline image usually takes precedence over a style-dictated alignment.

Myriad style and tag presentation-attribute combinations exist. You need a crystal ball to predict which combination wins and which loses the precedence battle. The rules of redundancy and style-versus-attribute precedence are elucidated in the W3C CSS2 standard, but no clear pattern of precedence is implemented in the styles-conscious browsers. This is particularly unfortunate because there will be an extended period, perhaps several more years , in which users may or may not use styles-conscious browsers. Authors must implement both styles and nonstyle presentation controls to achieve the same effects.

Nonetheless, our recommendation is to runas fast as you canfrom one-shot, inline, localized kinds of presentation effects such as those afforded by the <font> tag and color attribute. They have served their temporary purpose; it's now time to bring consistency (without the pain!) back into your document presentation. Use styles.