Eric A. Meyer - Values, Units, and Colors

The keyword inherit makes the value of a property on an element the same as the value of that property on its parent element. In other words, it forces inheritance to occur even in situations where it would not normally operate. In many cases, you dont need to specify inheritance, since many properties inherit naturally. Nevertheless, inherit can still be very useful.

For example, consider the following styles and markup:

#toolbar {background: blue; color: white;}

The div itself will have a blue background and a white foreground, but the links will be styled according to the browsers preference settings. Theyll most likely end up as blue text on a blue background, with white vertical bars between them.

You could write a rule that explicitly sets the links in the toolbar to be white, but you can make things a little more robust by using inherit. You simply add the following rule to the style sheet:

#toolbar a {color: inherit;}

This will cause the links to use the inherited value of color in place of the user agents default styles. Ordinarily, directly assigned styles override inherited styles, but inherit can undo that behavior.

Similarly, you can pull a property value down from a parent even if it wouldnt happen normally. Take border, for example, which is (rightfully) not inherited. If you want a span to inherit the border of its parent, all you need is