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
Formatted code
.bad {
color: red
background-color: yellow;
}Live preview
Invalid Property Names
Using a property name that does not exist will simply be ignored by the browser.
Example
Formatted code
.bad {
colr: blue;
font-size: 16px;
}Live preview
Invalid Values
Correct properties but invalid values will also be ignored.
Example
Formatted code
.bad {
width: -100px;
color: green;
}Live preview
Unclosed Braces
If you forget to close a brace } , the entire rule may be ignored.
Example
Formatted code
.bad {
padding: 20px;
margin: 10px;Live preview
Extra Colons or Braces
Typos like extra colons or misplaced braces can cause rules to break.
Example
Formatted code
.bad {
color:: blue;
}Live preview
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.