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.4   Conflicting Styles
Cascading style sheets are "cascading" because styles may be defined by a user, an author or a user agent (e.g., a Web browser). Styles "cascade," or flow together, such that the ultimate appearance of elements on a page results from combining styles defined in several ways. Styles defined by the user take precedence over styles defined by the user agent, and styles defined by authors take precedence over styles defined by the user. Styles defined for parent elements are also inherited by child (nested) elements. In this section, we discuss the rules for resolving conflicts between styles defined for elements and styles inherited from parent and ancestor elements.
Figure 6.2 presented an example of inheritance in which a child em element inherited the font-size property from its parent p element. However, in Fig. 6.2, the child em element had a color property that conflicted with (i.e., had a different value than) the color property of its parent p element. Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements. According to the W3C CSS Recommendation, conflicts are resolved in favor of properties with a higher specificity. In other words, the styles explicitly defined for a child element are more specific than the styles defined for the child's parent element; therefore, the child's styles take precedence. Figure 6.3 illustrates examples of inheritance and specificity.
Fig. 6.3 Inheritance in style sheets.
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">
4   
5   <!-- Fig 6.3: advanced.html -->
6   <!-- More advanced style sheets -->
7   
8   <html xmlns = "http://www.w3.org/1999/xhtml">
9      <head>
10        <title>More Styles</title>
11   
12        <style type = "text/css">
13   
14           a.nodec { text-decoration: none }
15   
16           a:hover { text-decoration: underline;
17                     color: red;
18           background-color: #ccffcc }
19   
20          li em { color: red;
21                  font-weight: bold }
22   
23          ul { margin-left: 75px }
24   
25          ul ul { text-decoration: underline;
26                  margin-left: 15px }
27   
28        </style>
29     </head>
30   
31     <body>
32   
33       <h1>Shopping list for <em>Monday</em>:</h1>
34   
35       <ul>
36          <li>Milk</li>
37           <li>Bread
38              <ul>
39                 <li>White bread</li>
40                 <li>Rye bread</li>
41                 <li>Whole wheat bread</li>
42              </ul>
43           </li>
44           <li>Rice</li>
45           <li>Potatoes</li>
46        <li>Pizza <em>with mushrooms</em></li>
47       </ul>
48   
49        <p><a class = "nodec" href = "http://www.food.com">
50        Go to the Grocery store</a></p>
51   
52     </body>
53  </html>



Page 1 | 2 | 3 | 4

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

Return to Tutorial Index