Two rules target the same element and set the same property. How does the browser decide which one wins?

The browser resolves it in order: origin and importance first, then cascade layers, then specificity, then document order. Inline styles outrank normal author rules, and an important declaration flips the origin order so an important user or user agent rule can beat an important author rule. Within one layer, specificity counts id, then class, attribute and pseudo class, then element selectors. Ties go to whichever rule comes last.

I think of it as a sequence of tiebreakers. First the browser looks at origin and importance, so an inline style beats a stylesheet rule and an important declaration changes the ordering entirely. Then cascade layers, which is the part people miss: an unlayered rule beats anything in a layer no matter how specific the layered rule is, and later layers beat earlier ones. Only after that does it compare specificity, and that is three buckets, ids then classes and attributes and pseudo classes then element selectors, compared left to right, so a single id beats any number of classes. If everything ties, the last one in document order wins. In practice I use layers to make this boring. I put reset in a first layer, then third party, then components, then utilities last, so a utility class always wins without needing important. The only place I still use important is for a genuinely non negotiable rule, usually something inside a print stylesheet.