Deitel & Associates, Inc. Logo

Back to
digg.png delicious.png blinkit.png furl.png
Internet & World Wide Web How to Program, 3/e
Internet & World Wide Web How to Program, 3/e

© 2004
pages: 1420

Amazon logo

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      "">
5   <!-- Fig. 6.5: external.html -->
6   <!-- Linking external style sheets -->
8   <html xmlns = "">
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 = "">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