Inheritance

Inheritance is the process by which properties are passed from parent to child elements even though those properties have not been explicitly defined by other means. Certain properties are inherited automatically, and as the name implies, a child element will take on the characteristics of its parent with regards to these properties.

Note: Inheritance and the Cascade

Inheritance is a mechanism that’s separate from the cascade: inheritance applies to the DOM (Document Object Model) tree, while the cascade deals with the style sheet rules. However, CSS properties set on an element via the cascade can be inherited by that element’s child elements.

For example, if a div element has a font-size of 20px then, assuming that no other font-size declarations have been explicitly defined, any children will also inherit that font-size value.

Why is this a good thing? Consider the following code:

div {
  font-size: 20px;
}
<div>
  <p>
    This <em>sentence</em> will have a 20px
    <a href="#">font-size</a>.
  </p>
</div>

If inheritance wasn’t at work in the above code, we’d have to specify a font-size declaration for each element in turn, to make sure that all the content in the sentence was rendered at 20px:

p {
  font-size: 20px;
}
em {
  font-size: 20px;
}
a {
  font-size: 20px;
}

With inheritance working in our favor, we merely have to set the font-size on the parent; all the children will inherit the font-size automatically. This is why you only need to set the font-size on the body element to have the whole page rendered at that font size—unless of course it has been explicitly defined elsewhere.

Note: Quirks Mode Inheritance Bugs

Note that modern browsers operating in quirks mode behave a little buggily in that they don’t inherit certain properties into tables. This quirks mode behavior emulates the buggy behavior of much older browsers. Usually, these properties have to be specifically applied to the table element, although a better approach would be to avoid the issue altogether by using a doctype that causes the browser to use standards mode rendering. To learn more about doctypes and rendering modes, see Standards Mode, Quirks Mode, and Doctype Sniffing.

Tip: font-size Inheritance

In the above example, we used a font-size of 20px on the parent div element. That value was inherited by the div’s child elements, but can you imagine what would happen if we set the font-size property of the div element to a percentage size:

div {
  font-size: 130%;
}

At first glance, you may be thinking that the p element inside the div will inherit a font-size of 130%, and will therefore be 130% bigger than its parent. You don’t need to worry, though, because this is taken care of for you: the p element will inherit only the actual computed font size of the parent—not the 130% scaling factor—and will therefore be the same size as the parent. This is not the same as if we had specified the following:

div, p, a {
  font-size: 130%;
}

In the above code, the p element would be 130% bigger than its parent div, and the nested anchor element would be 130% bigger still than the p element. Take care when you’re setting percentage and em font sizes on nested elements, or this sort of compounding will occur.

As we already mentioned (before we were sidetracked!), only some properties are inherited from the parent automatically. The reason for this is quite obvious if you think about it. If, for instance, borders were inherited from the parent, the result would look very messy! Not only would the parent element have a border, but so would every child element; the result would be disastrous.

The foreground color is inherited by default, but backgrounds aren’t. Again, the reason for this is obvious: in most cases, you’d want the foreground color to be inherited by child elements, but if the parent element had a background image, you wouldn’t want the child elements to have the same image, as their background images probably conflict with their parent’s background image.

A lot of people think that the background-color property is also inherited. In fact this is not the case. The default value for background-color is transparent. This accomplishes what’s usually desired anyway, because the parent’s background color will be visible through the child element’s transparent background.

On the other hand, you may want to force the background to be inherited. If so, you may be able to use the inherit property value. The inherit property value has other uses too; it allows you to increase the weight of an inherited property by adding it to the author style sheet.

User-contributed notes

Related Products