CSS Errors

Learn common CSS errors and how to fix them. Understand why styles may not be applied as expected.

On this page

CSS errors are common, especially when you are learning. Unlike HTML, CSS does not show clear error messages, so styles may fail silently.

When CSS does not work as expected, it is usually caused by small syntax mistakes, incorrect selectors, or rule conflicts.

Missing Semicolons

Each CSS declaration should end with a semicolon. Missing semicolons can cause rules to be ignored.

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

The corrected version:

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

If a property name is incorrect, the browser will ignore it.

p {
  text-colour: red;
}

The correct property name is:

p {
  color: red;
}

CSS properties accept specific values. Invalid values will be ignored by the browser.

h1 {
  font-size: big;
}

A valid example:

h1 {
  font-size: 32px;
}

If your selector does not match any HTML elements, the styles will not be applied.

.box {
  background: yellow;
}

If no element uses class="box", this rule has no effect.

One of the most common mistakes is forgetting to link the CSS file to the HTML document.

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

Make sure the file path is correct and the CSS file actually exists.

Sometimes CSS works, but another rule overrides it due to specificity or source order.

p {
  color: red;
}

p {
  color: blue;
}

The second rule wins because it appears later in the stylesheet.

Next, you will start learning how to work with colors in CSS.