Smal SEO Tool
« CSS CommentsCSS Colors »

Troubleshooting CSS Errors

When your CSS doesn't work as expected, it's usually due to a few common errors. Learning to spot them is a key skill for any web developer.

Check for Typos and Syntax Errors

This is the most common source of problems. CSS is sensitive to spelling and syntax.

  • Check that property names are spelled correctly (e.g., background-color, not background-colour).
  • Ensure every declaration ends with a semicolon (;).
  • Make sure every opening brace { has a corresponding closing brace }.

Example: Missing Semicolon

Incorrect:

css
p {
  color: red
  font-size: 16px;
}

Correct:

css
p {
  color: red;
  font-size: 16px;
}

Specificity Issues

If you have multiple rules targeting the same element, the most specific rule will win. An ID selector (#myId) is more specific than a class selector (.myClass), which is more specific than a tag selector (p).

Example

css
#main-title { color: blue; } /* This will win */
h1 { color: red; }

In this case, an <h1 id="main-title"> will be blue, not red.

Use Browser DevTools

All modern browsers come with built-in developer tools (usually opened with F12 or Right-Click > Inspect). The "Elements" or "Inspector" panel allows you to select an HTML element and see exactly which CSS rules are being applied to it, and which rules are being overridden. This is the most powerful way to debug CSS.

Test Yourself with an Exercise

What is the most common cause of CSS rules not being applied?

« CSS CommentsCSS Colors »