After the specificity has been determined, the higher number wins. Assume
that two styles are in conflict because they both define the color of H1, but
define it differently. But because one definition has a specificity value of 13
and the other has only 1, the H1 headline is yellow, not blue.
What if two rules turn out to have the same specificity? I knew someone
would ask that. In that case (assuming that both are in a style sheet, or
otherwise are the same “closeness” to the HTML tag), the rule that was
specified last wins.
Grasping Inheritance ....................................................................................
Chapter 14 goes into inheritance in depth, but here I want to introduce the
idea to you so you won’t be completely flummoxed by some of the behaviors
that CSS exhibits in the examples in upcoming chapters. Flummoxation is an
uncomfortable feeling, as I well know.
You’ve got to get the idea of inheritance into your head if you want to fully
understand CSS. In the computer world, inheritance means that a “child”
object inherits properties or abilities from its “parent” object.
When you specify a style using CSS, styles are applied both to the element
and its “descendants.” For example, if you specify that a <p>element should
be displayed with a green background, most child elements of that <p>ele-
ment will also have green backgrounds. Here’s how it works:
<html>
<head>
<style type=”text/css”>
p {background: green;}
</style>
</head>
<body>
<p>diagrams <strong>belong in the box!</strong></p>
</body>
</html>
In this example, a child “inline element” (<strong>) nestles within a parent
element (<p>). The <strong>tag means strong emphasis and results in bold-
face. In this example, the strong text is boldface but also inherits the green
background of its parent element <p>.
Chapter 2: Getting Results with CSS 45
