CSS Tutorial

CSS Errors

CSS does not show error messages the way programming languages do; it simply ignores what it does not understand. Learning to spot common mistakes is the key to fixing styles that "just do not work."

Why CSS "fails silently"

When a browser reads a CSS rule it cannot understand, it does not crash or warn you. It simply skips that declaration and moves on. This is why a broken stylesheet often looks like "nothing happened." The trick is knowing what usually goes wrong.

1. Missing semicolons or braces

Leaving out a semicolon between declarations, or forgetting a closing curly brace, can break not only that rule but the rules that follow it.

Wrong vs right

/* Wrong: missing semicolon after blue */
p {
  color: blue
  font-size: 16px;
}

/* Right */
p {
  color: blue;
  font-size: 16px;
}

2. Wrong or misspelled selectors

A common cause of "my CSS is not applying" is targeting the wrong selector: using a dot for an id, forgetting the dot for a class, or misspelling the name. Remember: # for id, . for class.

Selector mix-ups

/* HTML has class="box", but this targets an element named box */
box { color: red; }      /* wrong */

.box { color: red; }     /* right */

3. Typos in property or value names

Misspelling a property (colr instead of color) or using an invalid value makes the whole declaration invalid, and the browser ignores it silently.

Mistake	Correct
colr: red;	color: red;
background-colour: blue;	background-color: blue;
font-size: 16;	font-size: 16px;
text-align: centre;	text-align: center;

4. Specificity and order conflicts

Sometimes your CSS is correct but another rule overrides it. More specific selectors win, and when two rules have equal weight, the one written later wins. Run the example below and notice which color the paragraph ends up.

Which rule wins?

Example

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: blue;
  }
  /* This id selector is more specific, so it wins */
  #special {
    color: green;
  }
</style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p id="special">This paragraph is green (id wins).</p>
</body>
</html>

How to debug CSS

Check for missing semicolons and unclosed braces first.
Confirm the selector matches the HTML (# for id, . for class).
Look for typos in property and value names.
Open your browser's developer tools (right-click, Inspect) to see which rules apply.
In dev tools, crossed-out styles mean they were overridden by a stronger rule.

💡

Browser developer tools are your best friend. Right-click an element, choose Inspect, and you can see every style applied to it and which ones were overridden.

⚠️

One broken rule can affect the rules after it. If a whole section of your page loses its styling, look for a missing brace or semicolon just above where things break.

Key points

CSS ignores what it cannot understand, without warnings.
Missing semicolons and braces are the top cause of breakage.
Match selectors to the HTML: # for id, . for class.
Typos silently invalidate a declaration.
Use browser dev tools to inspect and debug styles.