Why your CSS isn’t being applied: a checklist

When CSS has no effect, the rule is usually being overridden by a more specific or later rule, the selector does not match the element, the stylesheet is not loading or is cached, or a syntax error such as a missing brace is breaking the rules after it. The browser’s developer tools show which in under a minute.

Start with the browser’s inspector

1. Right-click the element and choose Inspect.
2. Look at the Styles panel. Is your rule listed at all?
   • Not listed: the selector does not match, or the stylesheet did not load.
   • Listed but crossed out: another rule overrides it. The winning rule is shown above it.
   • Listed with a warning icon: the property or value is invalid.
3. Check the Computed tab for the final value and which rule set it.

1. It is being overridden

• Specificity. An ID beats a class, which beats an element selector. #nav a wins over .link however late .link appears.
• Order. With equal specificity, the later rule wins — including rules in a stylesheet loaded after yours.
• Inline styles and !important beat ordinary rules. Use !important sparingly; it starts an arms race.
• Cascade layers, if your project uses @layer, decide precedence by layer order before specificity.

2. The selector does not match

• A typo in the class name, or a dot missing: button vs .button.
• Class names are case-sensitive: .Card does not match class="card".
• The element is not where the selector expects: .menu > li needs a direct child.
• The class is added later by JavaScript, or the element is inside a shadow DOM or iframe.

3. A syntax error stops the rest

A missing closing brace makes the browser treat everything after it as part of the unfinished rule, so rules further down silently fail. A missing semicolon breaks the declaration after it. Paste the stylesheet into the CSS Formatter and format it: rules that suddenly indent one level deeper than expected sit after an unclosed brace. The formatter only re-indents; it does not rewrite values, so the problem stays visible.

4. The stylesheet is not loading

• Check the Network tab for the CSS file: a 404 means the path is wrong.
• A file served with the wrong content type may be ignored by the browser; check the response headers.
• Check the <link> tag is in the page and has rel="stylesheet".

If you are unsure the markup is what you think it is, format it with the HTML Formatter to see the nesting clearly.

5. You are seeing an old version

Browsers and CDNs cache stylesheets. Hard-reload (Ctrl+Shift+R, or Cmd+Shift+R on a Mac) or tick “Disable cache” in the Network tab while developing. For production, versioned file names make browsers fetch the new file after each change.

6. The rule applies, but has no visible effect

• width and height do nothing on ordinary inline elements such as span.
• z-index needs a positioned element or a flex or grid item.
• A media query condition is not met at the current screen width.
• Some properties are not inherited, so setting them on a parent does not affect children.

Frameworks and component styles

Utility classes, CSS modules and component libraries add their own layers. Class names may be rewritten at build time, so a selector you write by hand for .card no longer matches. Component styles may load after yours and win on order. In those setups, follow the framework’s own way of overriding styles rather than raising specificity until something works.

Checklist

• Rule present in the Styles panel? Crossed out? Warning icon?
• Selector spelling and case checked?
• Stylesheet loaded with status 200?
• Cache bypassed?
• Formatted to reveal missing braces?