Why Is My CSS Not Working? A Checklist

Your CSS looks right and the page does not change. Work through this list in order; the cause is nearly always in the first three.

1. Is the file actually loading?#

Open DevTools, go to the Network tab and reload. A 404 on your stylesheet means the path is wrong.

<link rel="stylesheet" href="style.css">        <!-- same folder -->
<link rel="stylesheet" href="css/style.css">    <!-- in a css folder -->
<link rel="stylesheet" href="/css/style.css">   <!-- from the site root -->

Also check for a typo in rel="stylesheet". Browsers ignore the file silently if that word is wrong.

2. Does the selector match anything?#

This is the most common cause. In the console, run:

document.querySelectorAll(".my-class").length

If that prints 0, your CSS is fine and your selector is wrong. Watch for:

• .card for a class, #card for an id, card for a tag
• Case sensitivity: .myCard and .mycard are different
• class="card item" is two classes, not one called “card item”
• .parent .child (descendant) versus .parent.child (both on one element) — the space changes everything

3. Is another rule winning?#

Inspect the element in DevTools. Overridden rules appear with a line through them, and the winning rule is at the top. That tells you immediately whether your rule was beaten or never matched at all.

Specificity, roughly strongest to weakest:

1. Inline style="..."
2. #id
3. .class, [attribute], :hover
4. div, p, and other tag names

A single #header beats any number of classes. When two rules have equal specificity, the one later in the file wins.

4. Is the syntax valid?#

One missing brace or semicolon can break every rule that follows it.

.card {
  color: red
  background: blue;    /* missing semicolon above breaks this line */
}

.other {               /* this rule may be fine but look broken */
  padding: 10px;
}

In DevTools, invalid properties show with a warning icon. Scroll up from the first rule that stopped working — the mistake is above it.

5. Is the property allowed on that element?#

Some properties do nothing on some elements:

• width, height, and vertical padding do not apply to inline elements like span and a. Add display: inline-block.
• gap only works on flex and grid containers.
• position: absolute positions relative to the nearest ancestor with a position other than static.
• z-index does nothing on a position: static element.

6. Is it a caching problem?#

Hard-refresh with Ctrl + Shift + R (Cmd + Shift + R on Mac). If the file is served by a host with caching, the browser may be showing yesterday’s stylesheet.

7. Is the element even visible?#

Styles apply, but you cannot see the result:

• The element has no content and no height
• Something is on top of it — check z-index
• The text colour matches the background
• A parent has overflow: hidden and the child is outside it

The fastest way to check#

Add an obvious temporary rule and see if it appears:

.my-class {
  outline: 3px solid magenta;
}

If the outline shows, your selector matches and the problem is the specific property. If it does not, the selector is wrong or the file is not loading. That one test splits the problem in half.

Where to go next#

• CSS basics explained
• Browser DevTools for beginners
• Why is my Python code not working? — the same method, for Python
• Why is my HTML not showing correctly?