The Inherit Keyword

The "Inherit" Keyword

We have seen that inheritance only comes into play after cascading, when there are no rules that apply to an element directly. But, just as the cascading order can be influenced with the !important flag, the importance of inheritance can also be increased. That is done with the keyword inherit.

Whenever you want to make sure that an element inherits a property value from its parent, you can make an explicit rule for that element, and specify inherit as the value of the property. For example:

 H1 { font-family: inherit } 

This rule takes part in the cascade as previously described, and if it wins, it causes the font-family value of H1 elements to be inherited from the elements' parent.

To make absolutely sure that a value is inherited, you can even combine inherit with !important. For example, a user could put in his style sheet that the shape of the mouse pointer should never change when the mouse moves into an A element, with this rule:

 A { cursor: inherit !important } 

The inherit keyword can be used on all properties, even those that normally don't inherit. It won't happen often that you want to make a non-inherited property into an inherited one, but if needed, it can be done. For example, to make sure that Ps have the same borders as their parents (and no borders if their parents have no borders), you can write the following:

 P { border: inherit }