Why Your Rule Did Not Apply

The C in CSS is Cascading, and this is what it names: the procedure for resolving conflicts. It is not vague, it is not a heuristic, and it is not "whatever comes last".

1. 1

   Is one of them !important?

   An !important declaration beats every normal one regardless of anything else. If both are, the comparison continues on to the next question between them.

2. 2

   Which has higher specificity?

   Count the selector's IDs, classes, and types. Higher wins. This is where most conflicts are actually settled, and it is the part people skip.

3. 3

   Which is written later?

   Only if the first two are exact ties. Later in the file, or in a later file, wins. This is the tie-breaker — not the rule.

Almost everybody learns step three first and stops there. That is why "my rule is at the bottom and it still does not work" feels arbitrary: source order never got consulted, because step two had already decided.

Specificity is three numbers, counted from the selector itself. Nothing about the declaration matters, only the selector in front of it.

p                      0-0-1.intro                 0-1-0p.intro                0-1-1nav ul li a            0-0-4.nav .item a           0-2-1#header                1-0-0#header .nav a:hover   1-2-1*                      0-0-0

The crucial rule is the one the widget demonstrates: the columns are compared left to right and the comparison stops at the first difference. It is not a three-digit number.

An inline style attribute sits above all three columns, which is the practical reason inline styles are hard to work with: nothing in your stylesheet can override one except !important.

When specificity is identical, the later declaration wins. This is useful and it is what makes an override file work.

.btn { background: grey; }.btn { background: green; }   /* green: same 0-1-0, written later */

#save .btn { background: green; }   /* 1-1-0 — wins */.btn       { background: grey;  }   /* 0-1-0 — loses, despite being later */

Two practical consequences. Link stylesheets in the order you want them to override — a theme file after a base file. And within one file, put general rules first and specific ones after, so ties resolve the way you would expect while reading.

Inheritance is not the cascade and the two are constantly confused. The cascade decides between rules that target the same element. Inheritance passes values down the tree to elements no rule targeted at all.

body {  font-family: system-ui, sans-serif;  color: #333;  line-height: 1.6;}/* Every paragraph, list item, heading and link inside inherits   all three — no rule mentions them. */

Two things this explains. Links do not inherit colour from body, because the browser's own a { color: … } rule targets them directly, and a rule always beats an inherited value. And form controls do not inherit your font at all — they take the operating system's, which is why forms often look out of place until you fix it:

input, textarea, select, button {  font: inherit;}

Adding !important to a declaration lifts it above every normal one, whatever its specificity.

.btn { background: green !important; }

It works. That is the problem: it works immediately, so it is reached for whenever a rule does not apply, and it removes the pressure to find out why.