Inheritance of Styles - Beaverland Tech-Forum where web surfers buy things and gather technical information

Inheritance of Styles
by Akira Kato
June 6, 2001

What the heck is Inheritance
in CSS?

An HTML element that contains another element is considered to be the parent element of the element it contains, and the element it contains is considered to be its child element.
For example, in the following HTML text, the <BODY> element is the parent of the <H1> element which in turn is the parent of the <EM> element.
<BODY> <H1>The headline <EM>is</EM> important!</H1> </BODY>

In many cases, child elements acquire or inherit the styles of their parent elements. For example, suppose a style has been assigned to the <H1> element as follows:
<STYLE type="text/css"> H1 {color:blue;} </STYLE> <BODY> <H1>The headline <EM>is</EM> important!</H1> </BODY>

The headline is important!

In this case, the child <EM> element takes on the style of its parent, which is the <H1> element, so the word is appears in blue. However, suppose you had previously set up a style specifying that <EM> elements should be displayed in red. In that case, the word is would be displayed in red, because properties set on the child override properties inherited from the parent.
<STYLE type="text/css"> H1 {color:blue;} EM {color:blue;} </STYLE> <BODY> <H1>The headline <EM>is</EM> important!</H1> </BODY>

The headline is important!

Inheritance starts at the top-level element. In HTML, this is the <HTML> element, which is followed by the <BODY> element.
To set default style properties for all elements in a document, you can specify a style for the <BODY> element. For example, the following code sets the default text color to green.
<STYLE TYPE="text/css"> BODY {color: green;} </STYLE>

A few style properties are not inherited by the child element from the parent element, but in most of these cases, the net result is the same as if the property was inherited.
For example, consider the background color property, which is not inherited. If a child element does not specify its own background color, then the parent’s background color is visible through the child element. It will look as if the child element has the same background color as its parent element.

The background color property is not inherited. If a child element (like this cell) does not specify its own background color, then the parent’s background color (white) is visible through the child element—this cell.
However, the background color of this sell is defined. So, lime overrides the background color (white) of the parent.

The above table is defined as follows:
<TABLE WIDTH=450 bgColor=white BORDER=2> <TR><TD> The background color property is not inherited. If a child element (like this cell) does not specify its own background color, then the parent’s background color (white) is visible through the child element—this cell. </TD></TR> <TR><TD bgColor=lime> However, the background color of this sell is defined. So, lime overrides the background color (white) of the parent. </TD></TR> </TABLE>

The “inherit” value
Each property (such as text-indent, text-align or text-shadow) may also have a specified value of “inherit”, which means that, for a given element, the property takes the same computed value (described below) as the property for the element’s parent. The inherited value, which is normally only used as a fallback value, can be strengthened by setting “inherit” explicitly.
In the example below, the “color” and “background” properties are set on the BODY element. On all other elements, the “color” value will be inherited and the background will be transparent. If these rules are part of the user’s style sheet, black text on a white background will be enforced throughout the document.
BODY {
color: black;
background: white;
}
* {
color: inherit;
background: transparent;
}

NOTE: The universal selector (written “*”) matches the name of any element type. It matches any single element in the document tree. If the universal selector is not the only component of a simple selector, the “*” may be omitted. For example: *[LANG=fr] and [LANG=fr] are equivalent. *.warning and .warning are equivalent. *#myid and #myid are equivalent.

Computed values
Specified values may be absolute (i.e., they are not specified relative to another value, as in “red” or “2mm”) or relative (i.e., they are specified relative to another value, as in “auto”, “2em”, and “12%”). For absolute values, no computation is needed to find the computed value.
Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units such as “em”, “ex” and “px” must be made absolute by multiplying with the appropriate font or pixel size, “auto” values must be computed by the formulas given with each property, certain keywords (“smaller”, “bolder”, “inherit”) must be replaced according to their definitio ns.
In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the “line-height” property). In the cases where child elements do not inherit the computed value, this is described in the property definition.
If you want to know more about units, please read the article: Units Used in CSS.