Inheritance refers to the built-in capability of CSS to style children and descendants based upon defined properties of their ancestors. The logic being that if a parent is styled, then all children and descendants automatically inherit these properties.
Actually, even if the BODY element is not styled, descendants still inherit the browser's default styles for BODY!
Understanding inheritance allows an author to optimize their markup and styles if they understand how inheritance works in CSS!
An Example of Inheritance
The most common example is when you set the color of the BODY tag. Because the BODY tag is the ancestor of all tags contained within it (or below it), you need only set the color one time. All descendants automatically inherit this value.
It also means that if a property is inherited, there is no reason to then style the same property in sub-elements. This reduces redundancy by not having to re-define the same property in every sub-element.
body { color: #00f; }
em { color: #f00; }- The BODY tag is styled with the color blue.
- The BODY tag is the ancestor to all elements within the document, thus all elements contained within the BODY inherit the color value and are displayed in blue.
- Because there is no reason to specifically specify a color for sub-elements, the CSS is not bloated to include inherited properties.
- Bear in mind that all properties do not inherit (more on this below).
- color is a property which is applied to content within a document, not to the layout of the document itself.
- Any element can specifically override an inherited value. In the example above, all text in the document will be blue, except for any content within the EM tag which will be red.
Properties which do Inherit
| azimuth border-collapse border-spacing caption-side color cursor direction empty-cells font font-family font-stretch font-size |
font-size-adjust font-style font-variant font-weight letter-spacing line-height list-style list-style-image list-style-position list-style-type orphans page |
page-break-inside quotes speak speak-header text-align text-indent text-transform volume white-space widows word-spacing |
Note that all of the properties above style content.
All of the font, list, and color properties inherit their values. This makes sense in that these properties are applied to content in the document, NOT to the layout of the document!
Properties which do NOT Inherit!
Not all properties inherit from their ancestors. Foreground properties which control the display of content typically do inherit while layout/background-type properties do not.
- background properties
- margins
- padding
- position
- border
- box model
- and others
Why some Properties DO NOT Inherit ???
Simple... it just does not make sense for some properties to be inherited!
Lets take a look at background properties as an example. Your intent is to display each page with a unique background type image. Lets assume that you set the background image of the BODY tag to display a specific image as the background image for all pages... this is a common task and seems reasonable to do. You expect that the specified image is displayed ONCE per document.
What would happen if the background property was inherited? If this were the case then every child and descendant element of the BODY tag would then show the same background image... the page would look horrible!
An EXAMPLE - What if the background did inherit ... ouch!