Debug the cascade

A link is the wrong color. A heading is too small. The tempting fix is a stronger selector, or !important, and move on. Don’t. Every time you do that, the next fix gets harder. Find out why the value is wrong, then fix the cause.

Here is the order I follow in DevTools.

Trace the value

Let’s say a link inside .card renders black when it should be blue.

1. Select the link and open the Computed panel. Find color.
2. Expand it. The panel lists every declaration that tried to set color, winner on top, losers crossed out.
3. Click the winner. DevTools jumps to the rule in the Styles panel, with file and line number.
4. Read the crossed-out ones too. Each lost for a reason: lower specificity, earlier in the file, or an earlier cascade layer.
5. Check the selector matches the element you meant. Hover it in the Styles panel and the matching elements light up in the page.

Most of the time step 2 solves it. You see that .card a beat a.link because it comes later with equal specificity, or that a reset has a { color: inherit } and the link picks up the card’s text color.

Inherited values and custom properties

If the winning declaration isn’t on the element itself, the Computed panel shows which ancestor it came from. A color: #222 on body reaching a link through inheritance is a common surprise.

Custom properties add a layer. If the rule says color: var(--link-color) and the result is wrong, expand the variable in the Styles panel to see its value and where it was defined. A typo like --link-colour makes the whole declaration invalid, and the property quietly falls back to its inherited or initial value.

When the rule isn’t there at all

Sometimes the rule you wrote doesn’t appear in the panel. Two checks:

• confirm in the Network panel that the stylesheet loaded with a 200, not a 404
• look a few lines above your rule for a missing }, because a syntax error swallows the rules after it

The Styles panel also shows a warning icon next to an invalid value, so colour: blue stands out.

Fix the cause

The fix is usually small: move a rule later in the file, lower the specificity of the competing selector, or correct the variable name. A duplicate selector with an extra class hides the symptom, but now you have two rules to keep in sync forever.

Try it on the course page: pick one wrong-looking value, trace it with the five steps, and write one sentence on why the winner won.