Web Design in a Nutshell

How Style Sheets Work

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 12pt. Verdana or some sans-serif font:

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

A rule is a declaration of how a page element (whether it is a heading, a blockquote, or a paragraph) should be displayed. Figure 23.1 shows the components of a style sheet rule.

Figure 23-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 the “Selectors” section 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 (;).

Values are dependent on the property. Some properties take measurements, ...