Flash cards
Review the key moves
What is the main idea behind CSS Errors?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-color: yellow;Put the learning moves in the order that makes the concept easiest to apply.
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;
}Live preview
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;
}Live preview
Invalid Values
Correct properties but invalid values will also be ignored.
Example
.bad {
width: -100px;
color: green;
}Live preview
Unclosed Braces
If you forget to close a brace } , the entire rule may be ignored.
Example
.bad {
padding: 20px;
margin: 10px;Live preview
Extra Colons or Braces
Typos like extra colons or misplaced braces can cause rules to break.
Example
.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.