Basic

Finding why a style is wrong

A style that does not apply is usually one of three things: the selector does not match, another rule wins, or the file is not loaded. Each has a check that answers it in seconds, and guessing is slower than running the three checks.

What you will see

Still nothing, because class names are case sensitive. The mismatch is the diagnosis, and it is invisible in the file.

About 1 min of reading

Try It

Diagnose a rule that does not apply.

1

Loud test

.card { background: hotpink; }

Before you run it, say out loud what it will print. Then open the answer.

What it prints
If no element turns pink, the selector is not matching - the value is fine.
2

Match the real class

.Card { background: hotpink; }

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Still nothing, because class names are case sensitive. The mismatch is the diagnosis, and it is invisible in the file.

Data Flow

Three checks find the cause.
1 Make the value loud
↓
2 Did anything change?
↓
3 If not, check the selector and the file
↓
4 If yes, check which rule won
Why this works
One property at a time

Change a single property to a loud value, confirm it applies, then change the real value. Debugging one property at a time is faster than reasoning about a block of six that might have two problems.

Trust the browser, not the file

The browser shows which rules matched an element and which lost. Reading that list is faster than reasoning about specificity, and it is the difference between a guess and an answer.

Examples

Is the rule there at all

Change the value to something loud and see if anything moves. If nothing changes, the rule is not reaching the element, and the problem is the selector or the file, not the value.

Which rule won

Two rules on the same element resolve by specificity and order, and the winner is the one you did not intend. Reducing the specificity of your selector, or scoping it more narrowly, is the fix rather than forcing a value.

Is the file loaded

A stylesheet that is cached from an earlier version shows the old look. Changing the file and seeing no change is the cache, and the fix is a version parameter on the URL, not a bigger change.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← One page, many widths
Previous Lesson
One page, many widths
Next Lesson
The cascade and specificity
The cascade and specificity →