CSS Errors
Errors in CSS can lead to unexpected behavior, or styles that are not applied correctly.
This page shows common CSS mistakes and how to avoid them.
Missing Semicolons
Forgetting a semicolon at the end of a declaration can break the whole rule.
Example
The color value has no semicolon, so the rule breaks.
Prompt
An HTML page that demonstrates a CSS error: a missing semicolon.
In a
<style> block, define a .bad rule where the color declaration has no semicolon before the next declaration, so the rule breaks. Apply class="bad" to a paragraph in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color: red
background-color: yellow;
}
</style>
</head>
<body>
<p class="bad">The missing semicolon after "red" breaks this rule.</p>
</body>
</html>
Invalid Property Names
If you use a property name that does not exist, the browser simply ignores it.
Example
The misspelled colr property is ignored, but font-size still works.
Prompt
An HTML page that demonstrates a CSS error: an invalid property name.
In a
<style> block, define a .bad rule that uses a misspelled property (colr instead of color) plus a valid font-size. The browser ignores the unknown property but keeps the valid one. Apply class="bad" to a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
colr: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p class="bad">The "colr" property is ignored, but the font-size still works.</p>
</body>
</html>
Invalid Values
A correct property with an invalid value is also ignored.
Example
The negative width is ignored, but the color still applies.
Prompt
An HTML page that demonstrates a CSS error: a valid property with an invalid value.
In a
<style> block, define a .bad rule with a negative width (which is invalid and ignored) and a valid green color. Apply class="bad" to a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
width: -100px;
color: green;
}
</style>
</head>
<body>
<p class="bad">The negative width is ignored, but the green color still applies.</p>
</body>
</html>
Unclosed Braces
If you forget to close a brace }, the whole rule may be ignored.
Example
The rule is missing its closing brace.
Prompt
An HTML page that demonstrates a CSS error: an unclosed brace.
In a
<style> block, define a .bad rule with padding and margin but leave off the closing brace, so the whole rule may be ignored. Apply class="bad" to a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
padding: 20px;
margin: 10px;
</style>
</head>
<body>
<p class="bad">The missing closing brace can cause the rule to be ignored.</p>
</body>
</html>
Extra Colons or Braces
Typos like an extra colon or a misplaced brace can break a rule.
Example
The double colon makes the declaration invalid.
Prompt
An HTML page that demonstrates a CSS error: an extra colon.
In a
<style> block, define a .bad rule with a double colon typo (color:: blue;) so the declaration is invalid. Apply class="bad" to a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bad {
color:: blue;
}
</style>
</head>
<body>
<p class="bad">The double colon makes this declaration invalid, so the color is not applied.</p>
</body>
</html>
Tips to Avoid CSS Errors
- Use a code editor with syntax highlighting.
- Check your CSS with a linter or validator.
- Write CSS in small sections and test often.