Understand the idea

A CSS rule can fail to appear for several distinct reasons. The stylesheet might not load, the selector might not match, or a different declaration might win.

Begin in the Network panel and verify the stylesheet response. Then inspect the target element and its matched rules. A crossed-out declaration is different from a rule that never matched. The Computed panel shows the value actually used for a property.

Read the example

Put the link element in the document head and the paragraph in the body. Add .notice { color: purple; } to /assets/style.css, then test with a local server.

HTML · EXAMPLE
<!-- The path is relative to the site root. -->
<link rel="stylesheet" href="/assets/style.css">

<!-- CSS selector: .notice -->
<p class="notice">Check one thing at a time.</p>

A small mistake, explained

What goes wrong

Changing specificity cannot fix a stylesheet returning 404. Repeated refreshes cannot fix a misspelled class.

How to fix it. Test in order: request, valid CSS syntax, selector match, cascade, computed value, layout context.

Try it yourself

Deliberately misspell the stylesheet path, then the class name. Notice how the evidence differs in developer tools.

Further reading

MDN — Debugging CSS

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.