Cascading Style Sheets (Webmaster in a Nutshell, 3rd Edition)

Style sheets are the way publishing professionals manage the overall "look" of their publications—backgrounds, fonts, colors, etc. Most desktop publishing software supports style sheets, as do the popular word processors.

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, and borders.

There are three ways to attach a style to a tag

Inline styles
Document-level styles
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.

9.1.1. Inline Styles

The inline style is the simplest way to attach a style to a tag—just include a style attribute with the tag, with a list of properties and their values. The browser uses the 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, "This is blue," in the <h1> tag style characteristic of the browser and also in the color blue and italicized:

<h1 style="color: blue; font-style: italic" >This is blue</h1>

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.

Style definitions are created with the name of the style attribute—color, for example—followed by a colon and then the style's value. You will commonly supply a list of style definitions for a single element. In the list, each style definition is separated by a semicolon.

9.1.2. Document-Level Styles

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 <style> and </style> tags, "document-level" style sheets affect all the same tags within that document, except for tags that contain an overriding inline style attribute.

The <style> tag must appear within the <head> of a document. Everything between the <style> and </style> tags is considered part of the style rules to be applied to the document. To be perfectly correct, the content of the <style> tag is not HTML and is not bound by the normal rules for HTML content. The <style> tag, in effect, lets you insert foreign content into your HTML document that the browser uses to format your tags. Older browsers may not know how to handle this content, so it is common practice to place your style definitions inside an HTML comment () within the style tag.

Style definitions in a style sheet begin with the name of the tag you are defining a style for. The style definitions are contained in braces following the tag name. For example, this document-level style sheet displays the contents of all <h1> tags as blue, italic text:

<head>
<title>All True Blue</title>

<style type="text/css">
  <!--
  /* make all H1 headers blue */

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

  -->
</style>
</head>

<body>
<h1>This is blue</h1>
...
<h1>Ever so blue</h1>

One important attribute for the style tag is 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. We prefer to include the type attribute so that there is no opportunity for confusion.

Comments are welcome inside the <style> tag and in external style sheets, but don't use a standard HTML comment; style sheets aren't HTML. Rather, enclose style comments beginning with the sequence /* and ending with */. Use this comment syntax for both document-level and external style sheets. Comments may not be nested.

We recommend documenting your styles whenever possible, especially in external style sheets. Whenever the possibility exists that your styles may be used by other authors, comments make it much easier to understand your styles.

9.1.3. External Style Sheets

You may also place style definitions, like our document-level style sheet example for the <h1> tags, into a text file with the MIME type of text/css and import this style sheet into your HTML documents. Because an external style sheet is a file separate from the HTML document and is loaded by the browser over the network, you can store it anywhere, reuse it often, and even use others' style sheets. But most important, external style sheets give you the power to influence the display styles not only of all related tags in a single document, but for an entire collection of documents.

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

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

For each and every one of the HTML 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, since style definitions cascade by nature, the style can be overridden by a document-level or inline style definition.

You can load external style sheets into your HTML document in two different ways: with the <link> tag for the @import style command.

9.1.3.1. Linked external style sheets

One way to load an external style sheet is to use the <link> tag:

<head>
<title>Linked Style</title>

<link rel=stylesheet type="text/css"
      href="http://www.kumquats.com/styles/gen_styles.css" 
      title="The blues"/>

</head>

The <link> tag creates a relationship between the current document and some other document on the Web. In the example, we tell the browser that the document named in the href attribute is a style sheet, and that its contents conform to the CSS standard, as indicated by the type attribute. We also provide a title for the style sheet, making it available for later reference by the browser.

The <link> tag must appear in the <head> of a document. The URL of the style sheet may be absolute or relative to the document's base URL.

9.1.3.2. Imported external style sheets

The second technique for loading an external style sheet imports the files with a special command within the <style> tag:

<head>
<title>Imported style sheet</title>

<style type="text/css">
  <!--

    @import url(http://www.oreilly.com/styles/gen_styles.css);
    @import url(http://www.oreilly.com/styles/spec_styles.css);
    BODY: {background: url(backgrounds/marble.gif)}

  -->
</style>

</head>

The @import command expects a single URL parameter that names the network path to the external style sheet. The url keyword, parentheses, and trailing semicolon are all required elements of the @import command. The URL may be absolute or relative to the document's base URL. The @import command must appear before any conventional style rules, either in the <style> tag or in an external style sheet. Otherwise, the browser ignores the preceding style definitions. This ordering also means that subsequent style rules can override rules in the imported sheet, and indeed they do.

The @import command can appear in a document-level style definition or even in another external style sheet, letting you create nested style sheets.

Linked Versus Imported Style Sheets

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

With one <link> tag, the browser loads the styles in the referenced style sheet and formats the document accordingly, with any document-level and inline styles overriding the external definitions. With two or more <link> tags, the browser presents the user with a list of all the linked style sheets. The user can then select one of the sheets, which is used to format the document. The other linked style sheets are ignored.

On the other hand, the styles-conscious browser merges, as opposed to separate, multiple imported style sheets to form a single set of style rules for your document. The last imported style sheet takes precedence if there are duplicate definitions among the style sheets. Imported styles also override linked external styles, just as document-level and inline styles override external style definitions.

Chapter 9. Cascading Style Sheets