CSS inheritance is a family-trait system for styles. When a parent element has certain properties, its children and other descendants automatically receive those properties too. That lets one rule style a whole little branch of a page instead of repeating the same declaration on every element. section 19.23
Only some properties pass along. Text-related styling such as color can be inherited, while a parent’s border normally is not. Browsers can also override an inherited value—for example, links may use their own color so they remain easy to spot. section 19.23
To follow an inherited style, work down the HTML family tree:
- Style a parent element. section 19.23
- Check its child and descendant elements; inheritable properties flow to them automatically. section 19.23
- Look for a more powerful declaration if a child does not appear to match; the cascade and specificity can determine the final style. section 19.26 section 19.30
A div shares its text style
Give a div the class intro with brown, 1.1em text. Its em, sup, code, and nested div descendants use that text styling too, because they inherit it from the div. Add a border to the parent, however, and the descendants do not each get their own border. section 19.23
Inheritance matters extra much with em font sizes. Each nested element’s em value is calculated from its inherited font size, so sizes can multiply as the page structure gets deeper. If body is 16px, a 1.5em header becomes 24px and a 2em heading inside it becomes 48px—not 32px. section 14.7
body {
font-size: 1em;
}
header {
font-size: 1.5em;
}
h1 {
font-size: 2em;
}
Use the nested body, header, and h1 font rules to trace how inherited em sizes build from one level to the next. section 14.7
Inheritance is the “what” of style propagation: which values may travel from parent to descendant. The cascade is the “how”: when several style sources or declarations compete, it decides which value wins; specificity helps settle conflicts from comparable sources. section 19.26 section 19.30
