1.5

sheets that are included with a section are read in the specified order; see "Determining
the order in which style sheets are read" on the facing page.
Using a more specific CSS rule
By default, many CSS properties of an HTML element also apply to the elements inside that
element. For example, a CSS rule that specifies a certain font-type for a box is also applied to
paragraphs in that box. In this example the box is the 'parent' element and the paragraphs are
the 'child' elements that inherit the font-type property of the box.
Note
Although the background color property seems to be inherited, it isn't. Most elements are
transparent; therefore the background color of the parent element shines through.
To replace inherited style properties, you need to add a more specific CSS rule for that (type of)
element. In case of a conflict between a general rule and a more specific rule, the more specific
rule will be applied.
The following diagram shows the order of specificity.
Rules for HTML elements (p, table, li etc.) are general rules. Rules for classes, pseudo classes,
and elements with a certain attribute (.class, :hover, [target]) are more specific. Rules for
elements with a certain ID are even more specific. The most specific are inline styles.
Example
A more specific rule for cells in a table that has the CSS property “color: red” (which colors text
in the cells red) could be, for example:
Page 173