Even though certain characteristics are inherited automatically in CSS, there may be situations in which you want to increase the weight of the inherited property. Specifying a value of inherit for any CSS property that’s applied to an element will cause the element to gain its parent’s computed value for the property in question. By specifying in the author style sheet that a property should inherit its value, you can increase its weight.

Normally, in the absence of any applicable declaration, the color property is inherited. However, in the case of anchor elements, the color property is commonly set to blue in the user agent style sheet. If you wanted to reinforce the importance of the inherited value, you could use the value inherit in an author or user style sheet, overwriting the user agent style sheet declaration. In the following example, we set the foreground color of the p element to #000, or black, and specify that any child anchor elements should inherit the value of the foreground color from their parent element:

p {
  color: #000;
}
p a:link {
  color: inherit;
}

When you’re using shorthand notation such as background, you can’t mix inherit with other values. For example, the following background declaration is wrong:

p {
  background: #fff inherit left top;
}

In this case, you might be hoping that this element will inherit the parent’s background-image property. Unfortunately, you’d be out of luck. inherit must be the only value in the declaration, because there’s simply no way of identifying the subproperty to which the value inherit refers—after all, it’s not unique within the sequence. In the example above, inherit becomes ambiguous: it could refer to the background-image property, or to the background-attachment property, and the user agent has no way of knowing which one it applies to. To have an element inherit a specific property, you need to use the full notation instead of shorthand. In this case, we need to specify the background-image property:

p {
  background-image: inherit;
}

To find if a property is inherited by default, refer to the specific property reference page.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.


No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1