CSS Errors

Errors in CSS can lead to unexpected behavior or styles not being applied correctly.

This page shows common CSS mistakes, and how to avoid them.

Missing Semicolons

Forgetting a semicolon at the end of a property declaration can break the style rule.

Example

.bad {

  color: red

  background-color: yellow;

}

Invalid Property Names

Using a property name that does not exist will simply be ignored by the browser.

Example

.bad {

  colr: blue;

  font-size: 16px;

}

Invalid Values

Correct properties but invalid values will also be ignored.

Example

.bad {

  width: -100px;

  color: green;

}

Unclosed Braces

If you forget to close a brace }, the entire rule may be ignored.

Example

.bad {

  padding: 20px;

  margin: 10px;

Extra Colons or Braces

Typos like extra colons or misplaced braces can cause rules to break.

Example

.bad {

  color:: blue;

}

Tips to Avoid CSS Errors

• Use a code editor with syntax highlighting.

• Validate your CSS with a CSS linter or validator.

• Write CSS in small sections and test frequently.