This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Inheritance

Inheritance makes CSS operate sensibly.

Inheritance, in the world of CSS, isn't all that different from inheritance in the real world. When people have children they can pass on certain physical traits -- hair color, height, build, etc. In fact, from generation to generation, children inherit characteristics from their parents, who in turn inherited those traits from their parents.

You can also think of a Web page as a family of sorts, containing parent-child relationships. It's structured like a family tree. For instance, the <html> tag is like the patriarch (or matriarch) of the family -- all other tags are its offspring (see Figure 1). The <head> and <body> tags are its immediate children, and they in turn have their own children -- the <title> tag, for example, is a child of the <head> tag.

If all this talk of a family tree doesn't make sense to you, here's another way to think about it: If a tag is nested inside of another tag, it's a descendent of that tag. For example, every <table> tag has at least one <tr> (table row) inside it. That <tr> tag is a child of the <table>. In turn, <tr> tags have their own children -- <td> tags which indicate a single table cell.

When an element gets styled, you expect (in most cases) that its descendant elements will also be styled. For example, if you set a ul element to have italicized text, you assume that the list items within that list will be in italics: that's inheritance at work. Not every property is inherited. You wouldn't expect that a border around a ul element would lead to borders around each of the li elements; borders aren't inherited.

Inherited values are computed values. Let's say you set a table element to font-size: 200%. That size is computed to a specific length (for example in pixels, but it could be in any unit) and the computed size is inherited by the elements within that table; otherwise, every element would be twice as big as its parent! Exception: numeric values for line-height are inherited "in the raw". Inherited values always lose to values explicitily assigned by rules in the stylesheet. If you set ul elements to be red and li elements to be blue, they'll be blue because the assigned value of blue overrides the inherited value of red.

There are two ways you can push inheritance:

If you use the universal selector, it doesn't give inheritance a chance to work
- Consider this rule: * {color: green;}
- Every element - including hyperlinks- will be green, because the universal selector explicitly matches every element in the document
- One common trick is div, div * {color: green;}
If you use the value inherit, you explicitly assign an inherited value to the element
- Just about every property in CSS accepts inherit, which will "copy" the property's value from the parent of the selected element
- You could make hyperlinks the same color as the text in their parent element with a:link {color: inherit;}
- Reality check: inherit isn't well (or widely) supported by browsers

Not every property gets an inheritance

Properties that do not inherit:

Basically, the box-property properties: margins, borders, padding, height and width, backgrounds, floating and clearing, positioning properties, and a few miscellaneous others
Backgrounds look like they inherit, but they don't; element backgrounds are transparent by default, so the background of a parent element will show through—and yes, there's a difference
You can always force inheritance with inherit

Why don't these properties inherit?

If you set a border around a paragraph, it would look kind of silly to also have a border around every hyperlink, em, strong, span, and any other inline element
In general, the properties that don't inherit are ones which you wouldn't expect to inherit
The exception to this rule of thumb is text-decoration

Inheritance is a formalized feature of Cascading Style Sheets, so it's good to know what it is and how it works. But beyond that, using inheritance to pass frequently used properties to children tags means less formatting for you and easier updating of default properties.

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2002
Page URL: http:// www.d.umn.edu /~lcarlson/csswork/cascade/inherit.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.