CSS Cascade and Specificity Explained

Understand how the CSS cascade chooses a style using origin, importance, specificity, scope and source order, with beginner examples.

How the cascade chooses a style

When several CSS declarations target the same property on an element, the browser resolves them through the cascade. The result depends on where a declaration comes from, whether it is marked important, selector specificity and, when those factors tie, source order.

Compare selector specificity

An ID selector has greater specificity than a class selector, and a class selector has greater specificity than a type selector. Keep selectors straightforward so later changes stay easy to understand.

p { color: #334155; }
.note { color: #14532d; }
#intro-note { color: #7c2d12; }

If all three selectors match the same paragraph, the ID rule wins on specificity. The !important flag changes the cascade and should be reserved for cases where you control the competing styles.

Inheritance and source order

Some properties, such as color and font-family, are inherited by child elements. If declarations have equal cascade priority and specificity, the one that appears later wins.