Including Styles in Web Pages

Style sheets can be included in HTML documents in varying ways, including embedding, linking, and importing. In this session, you'll be primarily working with embedded styles, which are the easiest to implement. Linked or imported style sheets let you control the appearance of multiple documents from a single style sheet.

Embedding a Style Sheet

The STYLE element is a container element that is nested in the HEAD element to embed a style sheet in an HTML document. Add the STYLE element to the example:

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>The Good Egg Company: Egg Facts and Figures</title>
<style type="text/css">
</style>
</head>

The TYPE element is required and declares that the style sheet being used is a CSS style sheet. In HTML 4, it can only take text/css as its value, since CSS is the only style sheet language that can be used with HTML 4. In XHTML 1, however, additional style sheet languages can be declared.

Embedding a Style

You embed a style in the STYLE element. For instance, add a style to your style sheet that sets the H1 element's foreground color to blue (see Figure 8.1):

<style type="text/css">
h1 { color: blue; }
</style>

Figure 8.1: A style rule is added that causes the H1 element to be colored blue.

Anatomy of a Style Rule

A style is also called a style rule. A style sheet is composed of one or more style rules. A style rule is composed of two parts—a selector and a declaration block. For example:

selector { declaration block }

A selector designates an element or elements (h1, for example) to which style properties are to be declared. It can be a simple selector (specifying a single element) or it can be any of a number of more complex or specialized selectors. You learn more about using these other kinds of selectors later in this session.

A declaration block is separated from the selector by curly braces and can contain one or more declarations, separated by semicolons. For instance:

selector { declaration1; declaration2; declaration3; }

A declaration is composed of two parts: a property name and a value, separated by a colon (color: blue, for example) . For example:

selector { property1: value; property2: value; property3:
value; }

Using Inline Styles

The STYLE attribute lets you apply style properties directly to an element. This kind of style is generally referred to as an inline style. Inline styles generally take precedence over any other styles that are applied to an element. For example:

<h1 style="style rule">

Linking and Importing External Style Sheets

There are two additional ways to include style sheets in documents: linking and importing. The LINK element can be used in the HEAD element to link to an external style sheet. The @import at-rule (from CSS2) can be used to import style rules into an embedded style sheet.

You won't be doing either in the current example. Later, however, you can link to or import external style sheets to your page like this:

<title>Honest Ed's Used Cars: First Quarter Sales
Figures</title>
<link rel="stylesheet" type="text/css" href="mystyles1.css">
<style type="text/css">
@import { url('mystyles2.css'); }
h1 { color: blue; }
</style>

You would then need to create the mystyles1.css and mystyles2.css external style sheet files, for instance, containing the style rules you want to link to or import. These are simple text files, just like HTML files, with style rules as their only content (you do not include the STYLE element in an external style sheet file).

You can include embedded, linked, imported, and inline styles within the same document. When doing so, inline styles take precedence over all other styles, embedded styles take precedence over imported or linked styles, and imported styles take precedence over linked styles.