1 and see if you were correct.
Figure 5.1: The cascade in action
As you can see, the border-style is dashed, the font-size is 2em and the color
is white. So where did these properties come from?
There are two CSS rules that apply to the p element:
p.item {
color: #fff;
background-color: #ccc;
border-style: dashed;
}
p {
123 The Cascade, Specificity, and Inheritance
border: 1px solid black;
padding: 0.5em;
}
You can see there??™s no conflict for the color property; there??™s only one applicable
declaration, so the color is set to #fff, or white. We do have a conflict for the
background-style property, however, because there are two applicable declarations:
dashed and solid. The next step, then, is to compare the specificity of the selectors.
The selector p.item, has a higher specificity (0,0,1,1) than that of the selector p
(0,0,0,1), so the property is set to dashed.
But where does the font-size value come from? There are no explicit declarations
that set the font-size for the p element, but font-size is one of the properties
that??™s inherited from an element??™s parent.
Pages:
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189