CSS Cascade and Inheritance

Learn why an element can match several rules and still display a single final value for each CSS property.

The cascade chooses the winning declaration when multiple rules compete. Factors include origin, importance, cascade layer, specificity and, when previous factors tie, source order. Inheritance is different: certain properties, including color and font-family, naturally pass from a parent to descendants unless overridden.

Not every CSS property inherits. For example, a parent’s margin does not automatically become its children’s margin.

Give the parent a color but no direct color rule for the child.

HTML

<div class="message"><h3>Notice</h3><p>Read carefully.</p></div>

CSS

.message { color: #0f766e; font-family: Arial, sans-serif; }

Rendered output

Observe: Both heading and paragraph inherit the parent’s text color, unless overridden elsewhere.

Two same-specificity rules target the same paragraph.

HTML

<p class="notice">The last matching rule wins this tie.</p>

CSS

.notice { color: #dc2626; }
.notice { color: #2563eb; }

Rendered output

Observe: The text is blue because the second rule wins after all earlier cascade criteria tie.

First identify which declarations match, then resolve the cascade. If a descendant has no declared value for an inherited property, it can receive the computed value from its parent.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not assume the last rule wins when importance or specificity differs.
• A parent border or margin is not an inheritable property in the normal way.

Move the blue rule above the red rule. Then add a child with its own color and see how inheritance changes.

Before changing the code, predict what will change. Then verify by checking the rendered result.

The cascade resolves competing rules; inheritance supplies values to descendants when relevant.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.