Deitel & Associates, Inc. Logo

Back to www.deitel.com
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

ISBN:
0-13-145091-3
© 2004
pages: 1420

Order
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
Style sheets are a convenient way to create a document with a uniform theme. With external style sheets (i.e., separate documents that contain only CSS rules), Web-page authors can provide a uniform look and feel to an entire Web site. Different pages on a site can all use the same style sheet. When changes to the styles are required, the Web-page author needs to modify only a single CSS file to make style changes across the entire Web site. Figure 6.4 presents an external style sheet. Lines 1-2 are CSS comments. Like XHTML comments, CSS comments describe the content of a CSS document. Comments may be placed in any type of CSS code (i.e., inline styles, embedded style sheets and external style sheets) and always start with /* and end with */. Text between these delimiters is ignored by the browser.
Fig. 6.4 External style sheet (styles.css). 
1   /* Fig. 6.4: styles.css */
2   /* An external stylesheet */
3   
4   a { text-decoration: none }
5   
6   a:hover { text-decoration: underline;
7             color: red;
8             background-color: #ccffcc }
9   
10  li em   { color: red;
11            font-weight: bold;
12            background-color: #ffffff }
13   
14  ul      { margin-left: 2cm }
15   
16  ul ul    { text-decoration: underline;
17             margin-left: .5cm }

Page 1 | 2 | 3 | 4

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

Return to Tutorial Index