Glossary · Beginner
CSS inheritance
CSS inheritance lets selected properties take the computed value of a parent when no declaration supplies a value on the child.
- Published
- Last checked
Definition
CSS inheritance is the process by which some properties use a parent's computed
value when the element has no cascaded value of its own. Text properties such as
color and font-family commonly inherit. Layout properties such as margin
and border normally do not.
Keywords
inherit requests the parent's computed value explicitly. initial uses the
property's specification-defined initial value. unset behaves like inherit
for inherited properties and initial for others. revert and revert-layer
step back through cascade origins or layers rather than merely copying a parent.
Why it matters
Inheritance makes a document theme manageable: setting text color and font on a high-level container can cover its descendants. It can also create surprising control colors or hidden text when a nested component assumes a different background. The computed panel shows whether a value was inherited and from which ancestor.
Review question
Does the child own this value, or should it follow its context? Test nested links, form controls, disabled states, dark mode, forced colors, and user styles. Avoid universal resets that force every property to inherit; property defaults encode useful behavior, and copying layout values through a tree rarely matches the intended component boundary.
When a component depends on inherited typography or colour, document that dependency and place a contrasting example in its tests or examples. Reusable components often fail only when embedded under a different theme, link colour, or writing direction.