A Complete Guide to Web Design

392 Chapter 23 – Cascading Style Sheets

How Style Sheets Work

Web Design in a Nutshell, eMatter Edition

A rule is a declaration of how a page element (whether it is a heading, a block-

quote, or a paragraph) should be displayed. Figure 23-1 shows the components of

a style sheet rule.

The two main sections are the selector (which identifies the element to be

affected) and thedeclaration(the style or display instructions to be applied to that

element). In the sample code above,H1andPare 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 apropertyand itsvalue.

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, some

take color names, and others have a predefined list of accepted values. The syntax

for measurement and color values are discussed later in this chapter.

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 a style element embedded at the top of the HTML file,

and as an external file that can be either linked to or imported into the document.

Inline styles

Style information can be added to an individual element by adding thestyle

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-face: 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

would need to be made in every tag, in every file, rather than globally. Inline

styles are best used to occasionally override higher-level rules.

Figure 23-1: Parts of a style-sheet rule

declaration

selector{property:value}