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.
[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
|
2
|
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 }
|
