🎨 HTML / CSS Intermediate

How does the CSS cascade work?

Answer

The CSS cascade is the algorithm that determines which CSS declaration wins when multiple rules target the same element and property. It evaluates rules in order of priority: 1. Origin and importance — user-agent styles, user styles, author styles (your CSS), and !important declarations in each origin. 2. Specificity — inline styles beat ID selectors, which beat class selectors, which beat element selectors. 3. Source order — when specificity ties, the last rule in the source wins. The cascade enables inheritance (some properties like color and font-size flow down to children by default) and specificity overrides that make component-level styling possible.