bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Errors

Overview

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.

Previous

CSS Comments

Next

CSS Colors