Common Errors and How to Fix Them
When writing CSS, even small mistakes can cause styles not to work as expected. This chapter covers the most common CSS errors, their causes, and solutions with examples.
1. Missing Semicolons
Each CSS declaration should end with a semicolon (;). Forgetting one may break the entire block.
✅ Correct:
p {
color: blue;
font-size: 16px;
}
❌ Wrong:
p {
color: blue
font-size: 16px; /* This line won’t apply because the semicolon is missing above */
}
2. Using Wrong Property Names
CSS property names must be spelled correctly.
✅ Correct:
div {
background-color: yellow;
}
❌ Wrong:
div {
backgroundcolour: yellow; /* Wrong spelling, won’t work */
}
3. Invalid Values
Using an invalid value for a property will prevent it from working.
✅ Correct:
h1 {
font-size: 20px;
}
❌ Wrong:
h1 {
font-size: big; /* "big" is not a valid CSS value */
}
4. Not Linking the CSS File Correctly
If an external CSS file is not linked properly, styles won’t apply.
✅ Correct (inside <head>):
<link rel="stylesheet" href="styles.css">
❌ Wrong:
<link src="styles.css"> <!-- Wrong attribute: should use href -->
5. Specificity Issues
Sometimes styles don’t apply because another rule with higher specificity overrides it.
Example:
p {
color: blue; /* This may be overridden */
}
#intro {
color: red; /* IDs have higher specificity */
}
If <p id="intro">Hello</p> is used, the text will be red, not blue.
6. Using ID Instead of Class (or vice versa)
Mixing up IDs (#) and classes (.) is a common error.
✅ Correct:
#header { color: green; } /* For an element with id="header" */
.main { color: red; } /* For elements with class="main" */
❌ Wrong:
.header { color: green; } /* Won’t work if HTML uses id="header" */
#main { color: red; } /* Won’t work if HTML uses class="main" */
7. Forgetting Braces {}
Each CSS rule must have curly braces around declarations.
✅ Correct:
h1 {
color: purple;
text-align: center;
}
❌ Wrong:
h1
color: purple;
text-align: center;
8. Overusing Inline CSS
Inline CSS (style="") makes code harder to maintain and can lead to conflicts.
✅ Best Practice:
<p class="highlight">This is styled using a class.</p>
.highlight {
color: orange;
}
❌ Problematic:
<p style="color: orange;">This is inline styled.</p>
9. Forgetting Units
Many CSS properties require units like px, em, or %.
✅ Correct:
h2 {
margin: 20px;
}
❌ Wrong:
h2 {
margin: 20; /* Missing px */
}
10. Case Sensitivity Mistakes
CSS property names are case-insensitive, but HTML class and ID names are case-sensitive.
✅ Correct:
<div class="box"></div>
.box {
border: 1px solid black;
}
❌ Wrong:
<div class="Box"></div> <!-- Capital B -->
.box {
border: 1px solid black; /* Won’t match "Box" */
}
11. Comment Mistakes
CSS comments must use /* ... */.
✅ Correct:
/* This is a comment */
p {
color: green; /* Comment here */
}
❌ Wrong:
// This is not valid in CSS
#header {
color: red;
}
12. Using Shorthand Incorrectly
Shorthand properties must follow the correct order.
✅ Correct:
margin: 10px 20px 15px 5px; /* top right bottom left */
❌ Wrong:
margin: 10px 5px 20px; /* Invalid shorthand (must be 1, 2, or 4 values) */
Debugging CSS Errors
🔹 Steps to Fix Issues Quickly:
- Check the browser console (DevTools) for CSS errors.
- Validate your CSS with tools like W3C CSS Validator.
- Use clear naming conventions for classes and IDs.
- Test frequently in different browsers and screen sizes.
✅ By avoiding these common mistakes, your CSS will be cleaner, easier to maintain, and more effective.