# Why a Rule Wins

When two rules disagree, the browser picks a winner, and it always follows the same steps. Learn the cascade, score selectors by specificity, see what children inherit from their parents, and fix a style that won't change without reaching for !important.

Updated: November 10, 2026

## [The Cascade](https://www.ask-codey.com/courses/css-in-depth/topics/css-the-cascade)

1. [The Cascade: How the Browser Picks a Winner](https://www.ask-codey.com/lessons/css-cascade) (Apprentice): When two CSS rules set the same property on the same element, the browser runs the same tie-breaker contest every time, and knowing its rounds tells you why a style won or lost.
2. [Specificity: Scoring a Selector](https://www.ask-codey.com/lessons/css-specificity) (Apprentice): Specificity is the score the browser gives every selector, in three columns, and comparing two scores column by column tells you which rule wins before you refresh.

## [Inheritance](https://www.ask-codey.com/courses/css-in-depth/topics/css-inheritance-topic)

1. [Inheritance: What Children Get from Their Parents](https://www.ask-codey.com/lessons/css-inheritance) (Apprentice): Some properties, mostly text ones such as color and font, pass from an element to everything inside it, while box properties such as border and padding stay put, and a few keywords let you choose.

## [Exercise: Why Won't It Change?](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-why-wont-it-change)

1. [Exercise: Why Won't It Change?](https://www.ask-codey.com/lessons/exercise-css-why-wont-it-change) (Apprentice): Find out why five of a bike shop's styles lose, fix each one without !important, and write one line saying why it lost, until every test passes.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-why-a-rule-wins