Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

13.4. Understanding Style Inheritance

Inheritance is the act of picking up property values from one's ancestors. In CSS, all foreground properties (properties that are used in displaying visible elements, font color, and so on) are inherited by descendant elements. The following definition would result in all elements being rendered in green, because every element in the document descends from the body tag:

body { color: green; }

Note that this inheritance rule is valid only for foreground properties. Background properties (background color, image, and so on) are not automatically inherited by descendant elements.

You can override inheritance by defining a style for an element with a different value for the otherwise inherited property. For example, the following definitions result in all elements, except for paragraphs with a nogreen class, being rendered in green:

body { color: green; }
p.nogreen { color: red; }

Instead of green, the nogreen paragraph elements are rendered in red.

Attributes that are not in conflict are cumulatively inherited by descendant elements. For example, the following rules result in paragraphs with an emphasis class being rendered in bold, green text:

body { color: green; }
p.emphasis { font-weight: bold; }