Chapter 4. Saving Time with Inheritance
Children inherit traits from their parents—eye color, height, male-pattern baldness, and so on. Sometimes, we inherit traits from more distant ancestors like grandparents or great-grandparents. As you saw in the previous chapter, the metaphor of family-relations is part of the structure of HTML as well. And just like humans, HTML tags can inherit CSS properties from their ancestors.
What Is Inheritance?
In a nutshell, inheritance is the process by which CSS properties applied to one tag are passed on to nested tags. For example, a <p> tag is always nested inside of the <body> tag, so properties applied to the <body> tag get inherited by the <p> tag. Say you created a CSS tag style (Section 3.1) for the <body> tag that sets the color property to a dark red. Tags that are descendents of the <body> tag—that is, the ones inside the <body> tag—will inherit that color property. That means that any text in those tags—<h1>, <h2>, <p>, whatever—will appear in that same dark red color.
Inheritance works through multiple generations as well. If a tag like the <em> or <strong> tag appears inside of a <p> tag, then the <em> and the <strong> tags also inherit properties from any style applied to the <body> tag.
Note
As discussed in Chapter 3, any tag inside of another tag is a descendent of that tag. So a <p> tag inside the <body> tag is a descendent of the <body>, while the <body> tag is an ancestor of the <p> tag. Descendents (think kids) inherit properties ...