Style Sheets | Dynamic HTML in Action

A style sheet consists of one or more style definitions (also called style rules). A style sheet can be contained within a Web document or kept in a file outside the document. A style definition is made up of a selector followed by a declaration block, as shown in this example:

 SPAN {font-weight: bold; font-style: italic}

The selector is simply the item to which the style will apply. In most cases, the selector is an HTML tag (although it can also be a global class, described later in this chapter). Selectors are designated by tag name only and omit the opening and closing angle brackets (< >) normally found in HTML. In the example above, SPAN is our selector, so all SPAN tags in our document will follow the rules specified in this style definition.

The declaration block follows the selector and is enclosed in curly braces. This block is a list of style declarations, separated by semicolons. Our example contains two style declarations: font-weight: bold and font-style: italic.

As it stands now, this style definition would have no effect on a Web page. To make style definitions work, you must include them as part of either a global style sheet or a linked (external) style sheet.

Global Style Sheets

A global (or embedded) style sheet is included as part of the HTML in a document. This type of style sheet defines its boundaries by the <STYLE> and </STYLE> tags and must be placed in the header region of the HTML document.

In Code Listing 11-4, we took the style definition from the preceding section and incorporated it into a global style sheet. As you can see in Figure 11-4, the output on the page is the same as when we used these properties in an in-line style (Figure 11-3, above). In this case, however, the style is defined separately, and it is applied to all <SPAN> tags in the document.

Code Listing 11-4.

 <HTML> <HEAD> <TITLE>Listing 11-4</TITLE> <STYLE>   SPAN {font-weight: bold; font-style: italic} </STYLE> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN><BR> This text is not in a SPAN. </BODY> </HTML>

click to view at full size.

Figure 11-4. An example of using a global style sheet.

In Code Listing 11-5, we expanded our HTML file to demonstrate the "reusability" of a global style sheet. This listing contains more text than the previous examples. Some regions of text are enclosed within <SPAN> tags, and some are not. Because we have created a style definition for SPAN elements in a global style sheet, the formatting specified by this style definition is applied to all of the SPAN regions but not to the other (non-SPAN) regions. This difference is obvious in Figure 11-5.

Code Listing 11-5.

 <HTML> <HEAD> <TITLE>Listing 11-5</TITLE> <STYLE>   SPAN {font-weight: bold; font-style: italic} </STYLE> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN><BR> This text is not in a SPAN.<BR> <SPAN>This text is in a SPAN. </SPAN><BR> This text is not in a SPAN.<BR> <SPAN>This text is in a SPAN. </SPAN><BR> This text is not in a SPAN.<BR> </BODY> </HTML>

click to view at full size.

Figure 11-5. Using a global style sheet that affects text in all SPAN elements.

Now let's add more style definitions to our style sheet. In Code Listing 11-6, we define the style for level 1 headings (<H1> tags) as 16-point boldface red text and the style for level 2 headings (<H2> tags) as 24-point italic green text. Figure 11-6 shows that the normal formatting for the SPAN, H1, and H2 elements in this document is overridden by our style sheet.

Code Listing 11-6.

 <HTML> <HEAD> <TITLE>Listing 11-6</TITLE> <STYLE>   H1   {font-size: 16pt; font-weight: bold; color: red}   H2   {font-style: italic; font-size: 24pt; color: green}   SPAN {font-weight: bold; font-style: italic} </STYLE> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN> <H1>This text is in an H1.</H1> <H2>This text is in an H2.</H2> </BODY> </HTML>

click to view at full size.

Figure 11-6. Using a global style sheet to change the styles of multiple elements.

If you want to alter further the appearance of any type of element in Code Listing 11-6, you can simply alter the style sheet. For example, if you change the H2 style definition to display text as blue, all H2 elements found in the document will reflect this change.

If you want a particular instance of an element to be formatted differently from what is specified in the global style sheet, you can override the style sheet by using an in-line style for that specific element. Code Listing 11-7 and Figure 11-7 provide an example. In Figure 11-7, the first H2 element in the document uses the style defined in the style sheet, but the second H2 element has an in-line style that overrides the font-size declaration specified in the global style sheet.

Code Listing 11-7.

 <HTML> <HEAD> <TITLE>Listing 11-7</TITLE> <STYLE>   H1   {font-size: 16pt; font-weight: bold; color: red}   H2   {font-style: italic; font-size: 24pt; color: green}   SPAN {font-weight: bold; font-style: italic} </STYLE> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN> <H1>This text is in an H1.</H1> <H2>This text is in an H2.</H2> <H2 STYLE="font-size: 36pt">This is modified H2 text.</H2> </BODY> </HTML>

click to view at full size.

Figure 11-7. An example of an in-line style used to override a global style sheet.

Linked Style Sheets

The formatting flexibility described in the preceding sections does not end at the level of the single Web page; you can control styles across several pages or even across an entire Web site by using linked style sheets. A linked (or external) style sheet is simply a text file that includes style definitions; it is saved using the CSS filename extension. This file, which is external to the HTML file, can be referenced by (or linked to) an HTML document that uses the HTML <LINK> tag.

Let's demonstrate the use of a linked style sheet with the style definitions from Code Listing 11-7. First we need to set up the style sheet. To do this, we can use any text editor, such as the Notepad application that ships on Microsoft Windows platforms, to create a file containing the style definitions shown in the following code:

 H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic}

We then save this file with the name styles.css. (Note the filename extension when looking for the file on the companion CD.) Notice that a linked style sheet does not include the <STYLE> and </STYLE> tags that are necessary with embedded style sheets in HTML documents.

We can now create an HTML document containing a link to this external style sheet. The code for this document appears in Code Listing 11-8; the display it produces is shown in Figure 11-8.

Code Listing 11-8.

 <HTML> <HEAD> <TITLE>Listing 11-8</TITLE> <LINK HREF="styles.css" REL="STYLESHEET" TYPE="text/css"> </HEAD> <BODY> <SPAN>This text is in a SPAN.</SPAN> <H1>This text is in an H1.</H1> <H2>This text is in an H2.</H2> <H2 STYLE="font-size: 36pt">This is modified H2 text.</H2> </BODY> </HTML>

click to view at full size.

Figure 11-8. Sample text styled with a linked style sheet.

The <LINK> tag should be used only in the header region of the HTML document. The <LINK> tag contains an HREF attribute. As it does in an <IMG> tag, HREF specifies the location of the target file. The REL attribute specifies that this link is a reference to a style sheet, and the TYPE attribute specifies the type of style sheet. Currently, the only commonly supported type of style sheet is text/css.

A linked style sheet has the same effect on an HTML document as a global (embedded) style sheet has. Every element in an HTML document whose tag is defined in the styles.css file is displayed using the specified style.

Because it is not contained within any particular HTML file, one linked (external) style sheet can be linked to an unlimited number of documents. You could, for example, create a linked style sheet for an entire Web site and link every page to that one style sheet. This ability is tremendously useful when you are trying to maintain a consistent look and feel across a Web site. It is also handy when you want to change the overall appearance of a Web site because modifications of any style in the site's CSS file are reflected immediately across the whole site. You can also use multiple <LINK> tags in one document to link to any number of different style sheets. (This feature is not supported in Internet Explorer 3.) Furthermore, the @import command enables one style sheet to include another. Both global and linked style sheets can use this command. For example, we could modify the styles.css file to include another style sheet as follows.

 @import: url(ie.css); H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic}

This will cause a second style sheet, named ie.css, found in the same folder as styles.css, to be loaded. As shown here, any @import rules must be placed at the beginning of the file, before style definitions. The colon and semicolon in the @import line are required. Netscape does not currently support the @import rule.