Explain how the cascade decides which declaration wins when several rules set the same property on an element.

The browser compares the competing declarations step by step. It moves to the next step only when there is a tie. A declaration is one property: value pair.

1. Origin and importance. The origin is who wrote the style. There are three origins:

• User-agent styles: the browser's own default stylesheet.
• User styles: settings or stylesheets that the person browsing has added.
• Author styles: your website's CSS.

For normal declarations, later origins win, in the order user-agent, then user, then author. So your CSS beats the browser defaults. !important reverses that order. So an important user-agent declaration beats an important author one.

2. Inline styles. A style attribute on the element beats rules that use selectors.

3. Cascade layers (@layer). For normal declarations, later layers win, and unlayered styles beat all layers. For !important declarations, the order flips and earlier layers win.

4. Specificity. The browser compares three counts, from left to right: (ids, classes/attributes/pseudo-classes, types/pseudo-elements). For example, #nav .item is (1,1,0).

5. Order of appearance. If everything else ties, the last declaration wins.

Inheritance is separate. An element takes a value from its parent only when no declaration targets that element at all.