CSS Validator
Catch the typing mistakes that CSS never complains about. Paste a style sheet and get a list of unknown properties, values that do not fit their property, unbalanced braces and malformed at-rules, each with its line and the syntax that was expected.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Validator
- Paste your CSS or open a .css file.
- Select Validate CSS.
- Read the list of issues; select one to jump to its line in the editor.
- Correct the code and validate again until the list is empty.
CSS Validator features
Unknown properties
Spots misspellings such as “colr” or “widht” that browsers ignore silently.
Value checking
Compares every value with the official syntax of its property and shows what was expected.
At-rule checking
Validates @media, @supports, @font-face and other at-rules and their descriptors.
Balance check
Finds missing or extra braces, parentheses and brackets, unclosed strings and comments.
Vendor prefixes on request
Prefixed properties are tolerated by default and can be listed with an option.
Runs locally
Your style sheet is checked in the browser and never uploaded.
When to use CSS Validator
- Finding out why a rule has no effect.
- Checking a hand-written style sheet before deployment.
- Cleaning up CSS inherited from an old project.
- Verifying the output of a preprocessor or a build step.
CSS Validator FAQ
Why does a browser not report CSS errors?
CSS is designed to skip what it does not understand. An unknown property or an invalid value is dropped and the rest of the rule is applied. This keeps old browsers working with new style sheets, but it also means a typing mistake produces no message at all, only a style that fails to appear.
What does “Invalid value” mean?
The property exists, but the value does not match what the property accepts: a length where a colour is required, five values where four are allowed, a keyword that belongs to a different property. The expected syntax is shown after the message.
Why is a property I know to work reported as unknown?
The validator follows the published CSS specifications and browser data bundled with it. Very new or experimental properties may not be included yet, and vendor-prefixed properties are non-standard by definition. If a browser supports it, the property works regardless of the report.
Does it validate SCSS, Sass or Less?
No. Those languages add variables, nesting rules of their own and functions that are not CSS. Validate the compiled CSS instead.
What happens when a brace is missing?
A missing closing brace makes the browser treat the following rules as part of the open block, where they are invalid, so several rules can silently disappear. The balance check reports the opening brace that was never closed.
Is modern CSS such as custom properties and nesting supported?
Custom properties, calc(), grid, container queries and other current features are recognised. Values of custom properties are not checked, because they may contain anything by design.
Why CSS mistakes are easy to miss
In most languages a typing error stops the program and prints a message. CSS takes the opposite approach. Its error handling rule is simple: if a declaration cannot be understood, ignore that declaration and continue. The rule exists for a good reason, since it lets authors use new features while older browsers simply skip them, but it turns every mistake into a silent one. You write margin-botom, nothing warns you, and you spend ten minutes wondering why the spacing is wrong.
A validator restores the missing feedback. It parses the style sheet the way a browser would and checks each declaration against the grammar defined in the specifications. Every property has a formal syntax, for example a colour for color, or one to four lengths for margin. When a value does not fit, the validator can say exactly what it expected, which usually makes the mistake obvious at a glance.
Structural errors deserve special attention because their effect spreads. A missing semicolon merges two declarations into one invalid declaration, so both are lost. A missing closing brace pulls the next rules into the current block, where the selectors are read as broken declarations and discarded until the parser finds its way out again. The balance check looks for these cases first.
Not everything reported needs to be changed. Vendor-prefixed properties are flagged as non-standard because they are, yet they may be exactly what an older browser needs. Use the report as a list of things to look at with intent: either fix the line or know why it is there.