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.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.

Page 1 | 2 | 3 | 4

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

Return to Tutorial Index