CSS not working? 7 reasons your styles don't apply, and how to find which one

You write a CSS rule, save, reload the page, and nothing changes. No error message, no warning, just the same plain page. That silence is what makes CSS frustrating: when HTML or CSS has a mistake, the browser doesn't stop like Python or Java would. It skips what it doesn't understand and carries on.

The good news is that there are only a handful of reasons a rule does nothing, and your browser can tell you which one it is. We tested every example below in Chrome.

First: ask the browser

Before guessing, right-click the element that looks wrong and choose Inspect. The developer tools open with the element selected, and the Styles panel lists every CSS rule that applies to it, with the file and line it comes from.

What you see there points straight to the cause:

• Your rule isn't in the list at all: the stylesheet isn't loaded (reason 1), or the selector doesn't match this element (reason 2).
• Your rule is there, but one line is crossed out with a small warning sign: the browser didn't understand that line (reasons 3 and 4).
• Your rule is there, but crossed out without a warning: another rule won (reasons 5 and 6).
• Your rule is there and not crossed out, but the page looks the same: the property doesn't do anything on this kind of element (reason 7).

1. The stylesheet isn't loaded

The stylesheet is linked in the <head> of the page:

<link rel="stylesheet" href="styles.css">

Three small things break it:

• The file name doesn't match. If the file is called styles.css but the link says style.css, the browser asks for a file that doesn't exist. The Console tab in the developer tools shows Failed to load resource: the server responded with a status of 404 (Not Found).
• The path is wrong. href="styles.css" means "next to this HTML file". If the CSS is in a folder called css, the link must be href="css/styles.css", and if it isn't in that folder, you get the same 404.
• rel="stylesheet" is missing. <link href="styles.css"> loads nothing as a stylesheet, and this time there's no error at all.

A quick test: put body { background: yellow; } at the top of the file. If the page doesn't turn yellow, the file isn't being loaded, and the problem is the link, not your rules.

2. The selector doesn't match

The selector is the part before the {. It has to match the element exactly, and these four mistakes all match nothing:

card { color: red; }    /* missing dot: looks for a <card> tag */
#card { color: red; }   /* # is for an id, not a class */
.Card { color: red; }   /* class names are case-sensitive */

<p class=".card">Hi</p>  <!-- no dot in the HTML -->

The rule is: in HTML you write the class name plain, class="card". In CSS you put a dot in front of it, .card, and # in front of an id, #title. Upper and lower case must match too: .Card doesn't match class="card".

3. A missing semicolon or brace

Each declaration ends with a semicolon. Forget one, and the browser reads two lines as one:

.card {
  color: red
  background: yellow;
  padding: 20px;
}

To the browser, the colour is now red background: yellow, which isn't a colour. It throws away that whole line, so both the colour and the background are lost, while padding: 20px after the next semicolon still works. That's why a missing semicolon so often breaks the line below it, not the line where it's missing.

A missing closing brace } does more damage: the browser treats the following rules as part of the unfinished one. In our test, the colour inside the unclosed rule still applied, but the next two rules after it were lost completely. If several rules near each other stop working at once, count the braces.

4. An invalid value or property name

CSS is strict about how values are written. All of these are thrown away:

.box {
  width: 300 px;    /* no space allowed: 300px */
  padding: 20;      /* a unit is needed: 20px (only 0 works without one) */
  colour: red;      /* the property is spelled color */
  color: "red";     /* no quotes around colour names */
}

The browser doesn't complain; it just ignores each line. In the developer tools, each one is crossed out with a warning sign, and hovering over it tells you whether the property name or the value is the problem.

5. Another rule wins: specificity

When two rules set the same property on the same element, the more specific selector wins, no matter which comes first. From weakest to strongest:

1. a tag, like p
2. a class, like .note
3. an id, like #title
4. a style="..." attribute written on the element itself

So here the heading is blue, even though the red rule comes later:

#title { color: blue; }
.big   { color: red; }

<h1 id="title" class="big">Welcome</h1>

In the Styles panel, the losing color: red is crossed out, and the winning rule sits above it. The fix is to make your rule at least as specific as the one that wins, or better, to style with classes throughout and keep ids out of your CSS, so you rarely have to fight this.

6. Another rule wins: the order

When two selectors are equally specific, the one that comes last wins:

.note { color: blue; }
.note { color: red; }  /* this one wins */

This happens more often than it seems: you add a new rule near the top of a long file, and an older rule further down overrides it. The same goes for whole stylesheets: a <style> block placed after the <link> overrides the linked file, and a <link> placed after the <style> block overrides the block.

7. The property does nothing on that element

Some properties only work on some kinds of elements. The classic case is width on a <span>:

.tag {
  width: 200px;
  background: yellow;
}

The rule is there in the developer tools and nothing is crossed out, but the yellow box is only as wide as its text. <span>, <a>, <strong> and other inline elements flow along with the text like words in a sentence, so they ignore width, height, and top and bottom margins. Add display: inline-block; (or display: block; if it should be on its own line) and the width works.

If nothing changes at all

If even the yellow-background test from reason 1 does nothing, check the basics: that you saved the file, that you're looking at the same page you're editing, and try a hard reload (Ctrl+Shift+R, or Cmd+Shift+R on a Mac) in case the browser kept an old copy.

A quick checklist

1. Right-click the element, Inspect, and look for your rule in the Styles panel.
2. Not there? Check the <link> (name, path, rel) and the selector (dot, #, spelling, case).
3. Crossed out with a warning? Look for a missing ; or }, a space before px, a missing unit, or a misspelled property.
4. Crossed out without a warning? A more specific or later rule wins.
5. Not crossed out but no effect? It's probably an inline element: try display: inline-block.

If something goes wrong in the JavaScript of a page instead, the error you'll meet first is usually Cannot read properties of null (reading 'addEventListener').