Before this lesson

Understand element, class and ID selectors and how stylesheets are loaded.

What you will be able to do

Diagnose conflicting declarations methodically instead of adding !important, and explain inherited text color.

Understand the mechanism

The cascade is not simply “last rule wins.” Applicability, origin, importance, layers and specificity participate before source order resolves a tie at the same level. Learn by controlling variables: compare normal declarations from one author stylesheet and layer, then observe ID, class and element selectors separately.

Inheritance supplies values for inheritable properties when the element does not get its own specified value. Text color and many font properties inherit; borders and widths generally do not. A highly specific parent selector does not pass its specificity down to defeat a directly assigned child color. This explains why changing body color does not necessarily recolor every link.

Runnable example

<style>
body { color: #234; }
p { color: #964; }
.note { color: #286c4d; }
p.note { color: #235b80; }
</style>
<p class="note">The paragraph is blue. <span>This span inherits it.</span></p>

Trace and verify

Predict the paragraph color, then verify it in computed styles. Remove p.note and the class rule wins. Move the element rule to the end: it still cannot beat the more specific class. Assign a color directly to span and observe that it no longer inherits the parent color. Change one condition per experiment.

Common mistakes and boundaries

!important changes importance; it does not fix an incorrect selector, missing file or invalid value. Do not treat specificity as an ordinary decimal number. Keep component selectors predictably low in specificity rather than creating an escalation that every later override must defeat.

Practice challenge

Compare .panel p and p.notice, then make the notice color stable without !important.

Reference solution and reasoning

Both contain one class and one type selector, so source order breaks the tie when other cascade factors match. Put the base color on .panel so it inherits, then assign a color directly to .notice. This avoids coupling the override to a growing chain of ancestors.

<style>
.panel { color: #345; }
.notice { color: #963b24; }
</style>
<div class="panel"><p class="notice">Check your input.</p></div>

Lab: the cascade is more than selector scores

For normal declarations from the same origin, layer order is considered before selector specificity. Adding !important everywhere hides the underlying decision. Save this complete page and disable individual declarations in DevTools to see which stage selects the winner.

<!doctype html><html lang="en"><meta charset="utf-8">
<title>Cascade lab</title>
<style>
@layer base, components;
@layer base { #lesson { color: rgb(160, 0, 0); } }
@layer components { .note { color: rgb(0, 90, 0); } }
.note { color: rgb(0, 0, 180); }
</style>
<p id="lesson" class="note">Inspect my computed color.</p>
<script>
console.log(getComputedStyle(document.querySelector('#lesson')).color);
</script></html>

Expected observations

Initially the computed color is rgb(0, 0, 180). Disable the unlayered .note declaration and it becomes rgb(0, 90, 0), not the red ID declaration.

Why this happens and where it stops applying

An unlayered normal author declaration outranks layered normal declarations. Between the declared layers, components comes later and wins here. Counting IDs first skips earlier cascade decisions. Inheritance is separate: an applicable specified value on a child avoids inheriting the parent color. Important declarations reverse layer ordering; this experiment intentionally avoids !important so you can isolate the normal-declaration rule.

Extension challenge

Remove the unlayered rule and reverse the declared layer order. Predict the color and explain whether this is a good fix for one button.

Reasoned solution

Declaring components, base makes the text red. Layer order is an architectural choice affecting many components. For one button, first check its class, variable and state instead of reversing the entire stylesheet architecture.

Further reading