Windows NT Internet and Intranet Development

To learn more about author Sanjaya Hettihewa, please visit the author's homepage.

Previous chapterNext chapterContents


- 9 -

Cascading Style Sheets


Cascading Style Sheets allow Web-page designers to create richly formatted Web pages. Before Cascading Style Sheets, Web-page designers had to create graphic files to have complete control over the text of a Web page. This is a resource-intensive process because it requires designers to create a graphic file and embed it in a Web page. In addition, browsing such a Web page requires the establishment of an additional HTTP connection to download the graphic file. Cascading Style Sheets solve this problem by giving Web-page developers complete control over the placement and appearance of elements on the page.

A thorough overview of stylesheets is beyond the scope of this chapter. Information presented here will introduce you to stylesheets, demonstrate how they are used to create richly formatted Web pages, and refer you to online resources for additional information.



URL: Visit Microsoft's Cascading Style Sheets Web page for additional information and relevant URLs.

http://www.microsoft.com/workshop/author/howto/css-f.htm





URL:The stylesheets section of Microsoft's Web Gallery contains numerous examples of how stylesheets can be used to enhance the appearance of documents.

http://www.microsoft.com/gallery/

Using Stylesheets

If you are familiar with Microsoft Word, think of stylesheets as document templates in Microsoft Word. The same way Microsoft Word templates control elements of a document, stylesheets control the appearance of elements of a Web page. As you will be shown later in this chapter, stylesheets can be used to control the formatting characteristics of certain HTML tags. Stylesheets are used primarily in the following three ways:

Embedding Stylesheets in Web Pages

Listing 9.1 shows how stylesheet declarations can be embedded in Web pages. Notice how the HTML tags <STYLE> and </STYLE> (lines 6-16) are used to embed stylesheet declarations for four HTML tags. Stylesheet declarations are enclosed in curly braces following the name of the HTML tag. Semicolons are used to separate multiple stylesheet properties. The default attributes of the HTML tags <H1>, <H2>, <P>, and <BODY> are modified by the stylesheet declaration in Listing 9.1. The <STYLE TYPE="text/css">...</STYLE> HTML tag defines a stylesheet declaration, as shown in lines 6-16 of Listing 9.1. The HTML comment separator (<!-- and -->) is used in lines 7 and 15 of Listing 9.1 to hide the stylesheet declaration from technologically challenged Web browsers. See Figure 9.1 for the Web page generated by Listing 9.1. See the section later in this chapter named "Web Browser Compatibility Issues" for a discussion of how the HTML comment separator is used to deal with Web browser compatibility issues related to Cascading Style Sheets.

The Web page in Listing 9.1 can be found in the CD-ROM kit that accompanies this resource library in the directory \Chap-09\CSS1.html.

Listing 9.1. Embedding a stylesheet in a Web page.

 1: <HTML>
 2: <HEAD>
 3: <TITLE>Embedding Stylesheets in Web pages</TITLE>
 4: </HEAD>
 5:
 6: <STYLE TYPE="text/css">
 7: <!--
 8:   BODY {font: 12pt "Arial"}
 9:   H1 {font: 25pt "Arial";
10:       color: red}
11:   H2 {font: 20pt "Comic Sans MS";
12:       color: blue}
13:   P  {font: 15pt "Times New Roman";
14:       color: black}
15: -->
16: </STYLE>
17:
18: <BODY BGCOLOR="FFFFFF">
19: <B>Content of Web page:</B>
20: <BR>
21:
22: <H1>
23: This text is enclosed between two "H1" tags.
24: </H1>
25:
26: <H2>
27: This text is enclosed between two "H2" tags.
28: </H2>
29:
30: <P>
31: This text is enclosed between two "P" tags.
32: </P>
33:
34: </BODY>
35: </HTML> 

Figure 9.1. An embedded stylesheet is used to format the text of a Web page.

Linking to an External Stylesheet

When publishing large volumes of information on a certain topic, consistency promotes continuity, ease of reading, and understanding. The Web page in Listing 9.2 (lines 4-7) demonstrates how to link a Web page to an external stylesheet. The URL given in line 6 points to an external file with stylesheet declarations. The <LINK> tag of Listing 9.2 is used to define the location of an external stylesheet.

Listing 9.2. Linking to an external stylesheet.

 1: <HTML>
 2: <HEAD>
 3: <TITLE> Linking to an external Stylesheet </TITLE>
 4: <LINK
 5:   REL=STYLESHEET
 6:   HREF= "http://www.company.com/Stylesheet.css"
 7:   TYPE="text/css">
 8: </HEAD>
 9: <BODY>
10: Contents of Web page.
11: </BODY>
12: <HTML>

Inline Stylesheet Declarations in HTML Files

Inline stylesheet declarations can be used to override default attributes of HTML tags as well as linked and embedded stylesheet declarations. Compare Figure 9.1 with Figure 9.3 and notice how inline stylesheet declarations in lines 24, 29, and 34 override the embedded stylesheet declaration defined in lines 8-18 (see Figure 9.2).

The Web page in Listing 9.3 can be found in the CD-ROM kit that accompanies this resource library in the directory \Chap-09\CSS2.html.

Listing 9.3. Inline stylesheet declarations in HTML files.

 1: <HTML>
 2: <HEAD>
 3: <TITLE>
 4: Inline Stylesheet declarations in HTML files
 5: </TITLE>
 6: </HEAD>
 7:
 8: <STYLE TYPE="text/css">
 9: <!--
10:   BODY {font: 12pt "Arial"}
11:   H1 {font: 25pt "Arial";
12:       color: red}
13:   H2 {font: 20pt "Comic Sans MS";
14:       color: blue}
15:   P  {font: 15pt "Times New Roman";
16:       color: black}
17: -->
18: </STYLE>
19:
20: <BODY BGCOLOR="FFFFFF">
21: <B>Content of Web page:</B>
22: <BR>
23:
24: <H1 STYLE="font-size: 30pt; color:  blue" >
25: This text is enclosed between two "H1" tags
26: with inline Stylesheet  declarations.
27: </H1>
28:
29: <H2 STYLE="font-size: 25pt; color:  red">
30: This text is enclosed between two "H2" tags.
31: with inline Stylesheet  declarations.
32: </H2>
33:
34: <P 35: STYLE="font-size: 14pt; color:  Green; font-family: Courier">
35: This text is enclosed between two "P" tags.
36: with inline Stylesheet  declarations.
37: </P>
38:
39: </BODY>
40: </HTML> 

Figure 9.2. Inline stylesheet declarations override all other stylesheet declarations.

Web-Browser Compatibility Issues

At the time of this writing, Microsoft Internet Explorer is the only Web browser that supports Cascading Style Sheets. However, by the time you read this, Netscape Navigator 4.0 will also support Cascading Style Sheets. Although Internet Explorer 3.0 (and later versions) and Netscape Navigator 4.0 support stylesheets, some users will continue to use older, less capable Web browsers. When developing Web pages containing stylesheets, always use the HTML comment separation tags (<!-- and -->), as demonstrated in Listings 9.1, 9.2, and 9.3, to avoid a stylesheet declaration being interpreted as the text of a Web page by a stylesheet-challenged Web browser. When the HTML comment separation tags are used, Web browsers that do not support stylesheets ignore stylesheet declarations (as shown in Figure 9.3). The Web page in Figure 9.3 is the Web page shown in Figure 9.1 (and Listing 9.1), but viewed with Netscape Navigator 3.0.

Figure 9.3. Web browsers that do not support stylesheets ignore stylesheet declarations.

Summary

The formatting capabilities of HTML are very limited. Cascading Style Sheets are implemented to address this limitation and give Web-page designers complete control over the appearance and placement of elements on a Web page. Although Internet Explorer is currently the only Web browser that supports Cascading Style Sheets, the next version of Netscape Navigator (Netscape Navigator 4.0) will support Cascading Style Sheets.


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.