Cascading Style Sheet Tutorial: Conflicting Styles and Linking External Style Sheets (Page 4)

Internet & World Wide Web How to Program, 3/e
	ISBN: 0-13-145091-3 © 2004 pages: 1420 Order

Our prior CSS tutorial introduced CSS, inline CSS styles and embedded style sheets. In this tutorial, you'll learn how conflicts are resolved when multiple styles collide. We'll then demonstrate how to place your CSS styles in a separate file and link them to a Web page--a commonly used technique for sharing styles to provide a consistent look-and-feel throughout your Web site. This tutorial is intended for people who are familiar with basic HTML and have read our prior CSS tutorial.

Download the Code Examples

[Note: This tutorial is an excerpt (Sections 6.4 and 6.5) of Chapter 6, Cascading Style Sheets, from our textbook Internet & World Wide Web How to Program, 3/e. This tutorial may refer to other chapters or sections of the book that are not included here. Permission Information: Deitel, Harvey M. and Paul J., INTERNET & WORLD WIDE WEB HOW TO PROGRAM, 3/E, ©2004, pp.145-151. Electronically reproduced by permission of Pearson Education, Inc., Upper Saddle River, New Jersey.]

6.5 Linking External Style Sheets (Continued)

Figure 6.5 contains an XHTML document that references the external style sheet in Fig. 6.4. Lines 11-12 (Fig. 6.5) show a link element that uses the rel attribute to specify a relationship between the current document and another document. In this case, we declare

Fig. 6.5 Linking an external style sheet.

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5

6

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Linking External Style Sheets</title>

11 <link rel = "stylesheet" type = "text/css"

12 href = "styles.css" />

13 </head>

15 <body>

17 <h1>Shopping list for <em>Monday</em>:</h1>

18 <ul>

19 <li>Milk</li>

20 <li>Bread

21 <ul>

22 <li>White bread</li>

23 <li>Rye bread</li>

24 <li>Whole wheat bread</li>

25 </ul>

26 </li>

27 <li>Rice</li>

28 <li>Potatoes</li>

29 <li>Pizza <em>with mushrooms</em></li>

30 </ul>

32 <p>

33 <a href = "http://www.food.com">Go to the Grocery store</a>

34 </p>

36 </body>

37 </html>

the linked document to be a stylesheet for this document. The type attribute specifies the MIME type as text/css. The href attribute provides the URL for the document containing the style sheet. In this case, styles.css is in the same directory as external.html.

Software Engineering Observation 6.1

External style sheets are reusable. Creating them once and reusing them reduces programming effort.

Software Engineering Observation 6.2

The link element can be placed only in the head element. The user can specify next and previous as values of the rel attribute, which allow the user to link a whole series of documents. This feature allows browsers to print a large collection of related documents at once. (In Internet Explorer, select Print all linked documents in the Print... submenu of the File menu.)

Page 1 | 2 | 3 | 4

Check Out Our Other CSS Tutorials
Introduction to Cascading Style Sheets (CSS)

Return to Tutorial Index