= CSS inheritance
{c}
<CSS inheritance> propagates property values from a parent element to a child when the property's defaulting rules call for it. For an inherited property, the child normally receives the parent's <CSS computed value> if it has no applicable declaration supplying another value. A property that is not inherited instead normally uses its <CSS initial value>. The root has no parent from which to inherit.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Defaulting, Inheritance and Initial Values]{ref}
Suppose a parent has `font-size: 20px` and a child specifies `font-size: 150%`. The child computes to 30 <CSS pixels>. If a grandchild merely inherits font size, it receives 30 pixels; it does not multiply the original 150 percent again. This is why inheriting a computed value differs from copying the parent's source text.
The keyword `inherit` can request inheritance even for a property that does not normally inherit. Thus a width declaration with that keyword is a deliberate instruction, whereas omitting width does not automatically copy the parent's width. The exact result still depends on that property's value-processing rules.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[The inherit and unset keywords; computed values and inherited values]{ref}
Importance does not spread down the tree as selector priority. If a parent obtains red from an important color declaration, a child with its own ordinary blue color declaration can be blue. The parent contributed a possible inherited value; it did not create an important declaration on the child. Distinguishing <CSS inheritance> from the <CSS cascade> explains both shared styling and local overrides.
Back to article page
