CSS Errors

A browser never stops rendering just because one CSS rule is broken -- it quietly skips the bad line and keeps going, which is forgiving but can hide real mistakes for a long time.

In this page:

How Browsers Handle Invalid CSS
Common Syntax Mistakes
Spotting Errors in DevTools
Case Sensitivity and Typos
Validating Your CSS

How Browsers Handle Invalid CSS

When a browser's parser hits a declaration it can't understand -- a misspelled property, a missing unit, an unmatched brace -- it discards just that one declaration and moves on to the next, rather than failing the whole stylesheet. This fault-tolerant design is deliberate: it lets old browsers ignore new CSS features they don't recognize instead of breaking the page.

Example: How Browsers Handle Invalid CSS

css

p {
  colr: red;
  font-size: 16px;
}

Common Syntax Mistakes

The most frequent errors are a missing semicolon between declarations (which can silently merge two rules into one broken one), a missing unit on a numeric value like width: 20 instead of width: 20px, and mismatched or missing curly braces around a rule block. Each of these causes the browser to drop the affected declaration or, worse, everything after it until the next valid brace.

Example: Common Syntax Mistakes

css

p {
  width: 20
  color: red;
}

Spotting Errors in DevTools

Browser DevTools' Styles/Elements panel shows invalid declarations with a strikethrough and a warning icon, making them easy to spot once you know to look. Properties the browser doesn't recognize at all, or values it can't parse, are flagged this way even though no error appears in the page itself.

Example: Spotting Errors in DevTools

css

p {
  colour: blue;
}

Case Sensitivity and Typos

CSS property names and most keyword values are case-insensitive, but class and ID selectors are case-sensitive and must exactly match the HTML class/id attribute -- a common source of 'why isn't my style applying' bugs that look like errors but are really selector mismatches.

Example: Case Sensitivity and Typos

css

<style>
.Card {
  color: blue;
}
</style>
<div class="card">class="card" does not match the selector ".Card"</div>

Validating Your CSS

The W3C CSS Validator and most code editors' built-in linters catch invalid syntax before it ever reaches a browser, flagging unknown properties, invalid values, and unclosed blocks. Running a validator during development catches silent failures that would otherwise only surface as 'this style isn't working' with no visible error.

Example: Validating Your CSS

css

p {
  colr: red;
  width: 20;
}

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Comments Next Lesson → CSS Inheritance