Error Handling
CSS is designed to be fault-tolerant — errors do not break the page. The browser simply ignores invalid rules and continues parsing.
Demo: Error Handling Demo
HTML
<p class="error-demo">Invalid CSS is ignored; valid CSS still works</p> CSS
.error-demo {
color: #059669;
font-size: 1.125rem;
font-weight: bold;
/* This is invalid — the browser ignores it */
colr: #ff0000;
/* This is also invalid */
background-colour: hotpink;
/* This property does not exist */
super-style: amazing;
}Live Output Window
What Happens with Errors
/* Valid declaration */
color: #333;
/* Invalid property name — whole line ignored */
colr: #333;
/* Invalid value — declaration ignored */
color: burple;
/* Invalid selector — entire rule ignored */
@unknown-rule { }
Fallback Strategy
Provide fallback values for newer properties:
.element {
/* Fallback for older browsers */
background: #6366f1;
/* Modern browsers use this */
background: linear-gradient(135deg, #6366f1, #ec4899);
}
Common CSS Errors
| Error | Example | Result |
|---|---|---|
| Misspelled property | colr: red; | Ignored |
| Invalid value | color: burple; | Ignored |
| Missing semicolon | color: red | Next property may fail too |
| Invalid selector | @unknown {} | Entire rule ignored |
| Wrong unit | width: 100%px; | Ignored |
Because of this fault tolerance, CSS is safe to use with progressive enhancement — newer features degrade gracefully in older browsers.