How Style Sheets Work (Web Design in a Nutshell, 2nd Edition)

17.2. How Style Sheets Work

The key to working with style sheets is understanding how to define rules and then attach those rules to one or more HTML documents.

17.2.1. Rule Syntax

Style sheets consist of one or more rules for describing how a page element should be displayed. The following sample contains two rules. The first makes all the H1s in a document red; the second specifies that paragraphs should be set in 12 pixel high Verdana or some sans-serif font:

H1 {color: red}
P {font-size: 12px;
   font-family: Verdana, sans-serif;
   }

Figure 17-1 shows the components of a style sheet rule.

Figure 17-1. Parts of a style sheet rule

The two main sections are the selector (which identifies the element to be affected) and the declaration (the style or display instructions to be applied to that element). In the sample code above, H1 and P are the selectors. The different types of selectors that may be used are discussed in Section 17.3, "Selectors" of this chapter.

The declaration, enclosed in curly brackets, is made up of a property and its value . Properties are separated from their values by the colon (:) character followed by a space. A property is a stylistic parameter that can be defined, such as color, font-family, or line-height.

A declaration may contain several property/value pairs. Multiple properties must be separated by semicolons (;). Technically, the last property in a string does not require a semicolon, but developers usually include it anyway to make it easy to append the rule later. In addition, the inclusion of the trailing semicolon avoids a rare bug in older browsers.

Values are dependent on the property. Some properties take length measurements, some take color names, and others have a predefined list of accepted values. The syntax for length measurement and color values are discussed later in this chapter.

17.2.2. Adding Styles to an HTML Document

Rules (and sets of rules) can be applied to HTML documents in three ways: as inline style directions, as style elements embedded at the top of the HTML file, and as external files that can be either linked to or imported into the document.

17.2.2.1. Inline styles

Style information can be added to an individual element by adding the style attribute within the HTML tag for that element. The value of the style attribute is one or more standard style declarations, as shown here:

<H1 STYLE="color: red">This Heading will be Red</H1>

<P STYLE="font-size: 12pt; font-family: Verdana, sans-serif">
This is the content of the paragraph to be set with the 
described styles.</P>

Although a perfectly valid use of style information, inline styles are equivalent to the <font> tag in that they "pollute" the document with presentation information. Style information is still tied to each individual content element, and any changes need to be made in every tag, in every file, rather than globally. Inline styles are best used only occasionally to override higher-level rules.

17.2.2.2. Embedded style sheets

A more compact method for adding style sheets is to embed a style block in the top of the HTML document using the <style> element, summarized here:

<style>

NN 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<style>...</style>

Allows authors to embed style sheet rules in the head of the document There may be any number of <style> elements in a document.

Attributes

media=screen|tty|tv|projection|handheld|print|braille|aural|all: Specifies the target medium to which the style sheet applies.

type=content-type: Required. Specifies the style sheet language of the element's contents. The only viable type at this time is text/css.

title=text: Provides a title for the element.

The following example shows our sample rules embedded in a simple HTML document:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<! -- 
   H1 {color: red}
   P {font-size: 12pt;
       font-family: Verdana, sans-serif;
      }
 -- >
</STYLE>
<TITLE>Style Sheets</TITLE>
</HEAD>
...
</HTML>

The <style> element must be placed within the <head> tags in the document. In addition, it is usually necessary to place HTML comment tags (<! -- and -- >) around the <style> contents. This hides the style information from browsers that don't understand the <style> tag. (Otherwise, they might display the rules as text in the browser window.)

Currently, Cascading Style Sheets is the only widely supported style sheet language, but the W3C has prepared for the possibility of additional languages to be added in the future by providing the type attribute within the <style> element. The only viable style type as of this writing is text/css. If the type attribute is omitted, some browsers may ignore the entire style sheet.

17.2.2.3. External style sheets

The most powerful way to use styles is to collect them all in a separate text document and create links to that document from all the HTML pages in a site. In this way, you can make stylistic changes consistently across a whole site by editing the style information in a single document. This is a powerful tool for large-scale sites.

The style sheet document is a simple text document that contains a collection of style sheet rules. It may not contain HTML tags (after all, it isn't an HTML document). It also may not include HTML comments. In fact, the contents of a style sheet would look just like the sample code under Section 17.2.1, "Rule Syntax " earlier in this chapter.

There are two ways to refer to external style sheets (which should be named with the .css suffix) from within an HTML document:

Linking

The most standard and best-supported method is to create a link to that document using the <link> tag in the <head> of the document, as shown here:

<HEAD>
<LINK REL="STYLESHEET" HREF="/pathname/stylesheet.css" TYPE="text/css">
</HEAD>

The rel attribute defines the linked document's relation to the current document -- a "style sheet." The href attribute provides the URL to the file containing the style sheet information. Authors can link to more than one style sheet in a document.

Importing

17.2.3. Inheritance

An important feature of style sheets is the concept of inheritance, in which style properties are passed down from an element (the parent) to any element contained within it (the child). An element is said to inherit properties applied to elements higher in the HTML hierarchy. In CSS most properties can be inherited, but some (such as margins) cannot -- the CSS specifications later in the chapter point out if the property inherits or not.

For example, if you set the text color for a <ul> list, then this color will be inherited by every list item (<li>) within that list. If you specify that the <body> of a document should be red, all text elements contained in the body of the document will be red (unless specified otherwise).

Styles applied to specific elements override settings higher in the hierarchy. With planning, inheritance can be used to make style specification more efficient. For example, if you'd like all the text on the page to be blue except for list items, you can set the color property at the <body> level to apply to the whole document and then use another rule to make <li>s a different color. The more specific rules override more general rules.

If two rules of equal weight are listed in a style sheet, whichever one is later in the style sheet will apply.

17.2.4. Conflicting Style Sheets: The Cascade

Style sheets are said to be cascading because many different style sheet rules, coming from many different possible style sheets (inline, embedded, or external) can simultaneously affect the presentation of a single document. For example, it is possible to add inline styles to a document that is already linked to an external style sheet: the final look will result from all these style components cascading together.

With several styles applied to a document, conflicts are certain to arise. For example, when an inline style says the paragraph should be maroon, but the external style sheet says all paragraphs are blue, which style gets used?

The W3C anticipated this situation and devised a hierarchical system that assigns different weights to each type of style information. This cascade order provides a set of rules for resolving conflicts between competing style sheets. Styles with more weight (those defined at the more specific level) take precedence over styles set in a higher-level style sheet.

As in inheritance, more specific rules override more general rules. This allows you to design a general style for a whole site, then modify it for particular pages or elements, alleviating redundancy.

The following list shows the hierarchy of style instructions from general to specific, such that elements lower in the list have more weight and override styles above them.

Browser default settings.
User style settings (set in browser as a "reader style sheet").
Linked external style sheets. A document may have many linked style sheets. When multiple style sheets are linked to a document, the commands from the last file read take precedence over the first ones listed.
Imported style sheets. When multiple styles are imported, the commands from the last file read take precedence over the first ones listed.
Embedded style sheets (rules within the <style> element). Later rules have greater weight than earlier rules.
Inline style information.

If you want a rule never to be overridden by a subsequent rule, include the !important indicator just after the property value and before the semicolon for that rule. For example, to always set all paragraph text to blue, use the following rule in a style sheet for the document:

p {color: blue !important;}

Even if the browser encounters an inline style later in the document (which should override a document-wide style sheet), such as the following, that paragraph will still be blue because the rule with the !important indicator can not be overridden.[11]

[11]In CSS1, !important rules in style sheets generated by the author take precedence over reader style sheets. However, in CSS2, !important rules in reader style sheets take precedence over all other style sheets.

<p style="color: red">