Lesson 2: Understanding selectors, specificity, and cascading CHAPTER 4 163
Using the inherit value
The previous example was rather simple because elements typically have their properties set
to inherit by default. What would you do if you have an element whose background color is
set, but you want to reset the element to inherit from its parent? You could assign the inherit
value to the background color, as shown in the following example.
body {
font-size: x-large;
}
li:nth-child(even) {
font-size: small;
}
li:nth-child(4) {
font-size: inherit;
}In this example, the <body> element font size is set to extra-large, and all child elements
can inherit this setting. The next style rule selects even-numbered <li> elements and sets the
font size to small. The last style rule resets the font size back to inherit for the fourth child
<li> element.Lesson summary
■■A style rule, or style, is composed of two parts: the selector and the declaration block.
The selector locates the elements in the HTML document that will be styled. The decla-
ration block contains the formatting instructions (declarations).
■■Styles can be inline, embedded, or external.
■■To maintain separation between structure and presentation, use external style sheets.
■■Use the media attribute of the <link> element to specify the target device for a style
sheet.
■■Pseudo classes provide another way to select elements. Pseudo elements provide
access to information that is not available from the DOM. Use two colons (::) to denote
pseudo elements.
■■Use the “!important” modifier with user-defined styles to override author-defined
styles.
■■Cascading precedence is by importance, specificity, and then textual order.
■■The evaluation order of style sheets is the browser’s built-in style sheet, the user-
defined style sheet, the author’s normal style sheet, the author’s important style sheet,
and the user’s important style sheet.
■■Calculating the specificity of a selector is based on three levels of magnitude.
■■Element styles that are not assigned can inherit their style from a parent element.