CSS Validator & CSS Code Checker

Why validate CSS?

Invalid CSS declarations are silently ignored by browsers rather than causing an error. A typo in a property name or an unsupported value causes a style to fail invisibly — the rule simply has no effect, with no warning in the browser. CSS validation catches these issues before they reach production, where they're harder to spot and debug.

Common CSS validation errors and warnings

• Unknown property names — typos like backround instead of background, or browser-proprietary properties that don't exist in the spec.
• Invalid values — a string where a length is expected, a colour format that doesn't parse, or a value outside the allowed range.
• Duplicate properties — two declarations for the same property in the same rule; only the last wins, making the first dead code.
• Vendor prefixes without the standard property — -webkit-transform without transform will fail on non-WebKit browsers.
• !important overuse — a high count of !important declarations usually signals a specificity architecture problem.
• Empty rules — selectors with no declarations; these add parsing overhead with no effect.

W3C CSS Validator (Jigsaw)

The official W3C CSS Validation Service (at jigsaw.w3.org/css-validator/) checks CSS against the formal CSS specification published by the W3C. It validates against a specific CSS profile (CSS 2.1, CSS level 3, etc.) and can check pasted code or a live URL. This tool performs the same common checks with a focus on the issues most likely to cause real rendering problems — unknown properties, invalid values, duplicate declarations, and specificity.

For strict spec compliance (particularly useful when publishing CSS libraries or working with older user agents), use the W3C validator. For catching practical issues in production stylesheets quickly, use this tool.

CSS specificity

When multiple rules target the same element, the browser uses specificity to decide which declaration takes effect. The specificity hierarchy from highest to lowest: inline styles → ID selectors → class/attribute/pseudo-class selectors → element/pseudo-element selectors. A rule with an ID selector (#nav) beats a class selector (.nav) regardless of source order.

High specificity creates maintenance problems — overriding a high-specificity rule requires an even higher-specificity rule, which can cascade into !important usage and difficult-to-predict styles.

What is CSS? Cascading Style Sheets explained

CSS (Cascading Style Sheets) is the language that controls the visual presentation of HTML documents — layout, colours, fonts, spacing, and responsive behaviour. "Cascading" refers to the algorithm that resolves conflicts when multiple rules target the same element: specificity, source order, and the !important flag all determine which declaration wins.

CSS is maintained by the W3C (World Wide Web Consortium) and implemented by browser vendors. Browser support for individual CSS features varies — use a reference like MDN's browser compatibility tables to confirm whether a feature is supported across your target browsers before relying on it.

CSS custom properties (variables)

Custom properties (declared as --property-name: value and referenced with var(--property-name)) are a native CSS feature for storing reusable values. Unlike preprocessor variables (Sass, Less), custom properties are live in the browser — they cascade and can be overridden at any level of the DOM with a more-specific selector. This makes them ideal for theming and dynamic value changes via JavaScript.

Full issue reference

Every issue this tool reports has its own reference page explaining what it means, why it matters, and how to fix it, with a link to the relevant MDN documentation. Browse the full CSS validation issue reference.

Frequently asked questions