Home / Blog / Website Performance and Testing / How do you validate and check the CSS of a website?
Answers

How do you validate and check the CSS of a website?

16 October 2026 · By John Carlsson
To validate CSS, use the free W3C CSS Validation Service. You can enter a page or stylesheet address, upload a CSS file or paste code, and it reports errors, typos and incorrect CSS. Choose a modern CSS profile in the options, because the default is CSS 2.1. To see which styles apply to an element, right-click it in Chrome and choose Inspect.

What does a CSS validator check?

The W3C CSS Validation Service is free software from the W3C. It checks Cascading Style Sheets, and (X)HTML documents that use them, for errors, typos and incorrect uses of CSS. It also gives warnings about CSS that is technically allowed but may cause problems, such as a font-family without a generic fallback.

According to its About page, the validator compares your code with the grammar, properties and values defined in the CSS specifications. It is a helpful check, but the W3C is clear that the validator is not the final word. It is software with its own bugs, and the actual reference for CSS is the specifications themselves. If a result looks wrong, check the relevant specification before changing working code.

How do you validate CSS online?

The service offers three ways to submit your CSS, described in its user manual:

  1. By URI: enter the address of a web page or a stylesheet. The validator fetches it and checks the CSS it finds.
  2. By file upload: choose a CSS file from your computer. The manual notes that @import rules in an uploaded file are only followed when they point to public URLs, so relative paths will not work.
  3. By direct input: paste CSS into the text box. This is useful for checking a single rule or a small fragment.

If your CSS is embedded in an (X)HTML document, the W3C advises checking that the (X)HTML is valid first.

Why does modern CSS sometimes fail validation?

The validator checks against a CSS profile, and the result depends on which one is selected. Check which profile is selected under the options before you read the results, and choose the most recent CSS profile if you use newer features. Otherwise valid modern code may be reported as an error simply because it does not exist in the older level.

The options also let you change how many warnings are shown and choose a medium, such as screen or print, which works like applying an @media rule to the whole document.

If you want to run checks in bulk, the validator can be downloaded and run as a Java program or servlet, and it has an API. The W3C asks people who build on the API to pause between calls, or to run their own copy, so the shared service is not overloaded.

How can you check which CSS a page is using?

A validator tells you whether the code follows the rules. To see which styles actually apply to something on the page, use your browser's developer tools. In Chrome, the DevTools CSS guide explains the steps:

  1. Right-click the element you want to look at and choose Inspect.
  2. The Elements panel opens with that element selected.
  3. The Styles tab lists the CSS rules applied to it, including the class rules that set properties such as padding.

You can edit values in the Styles tab, add declarations to element.style, toggle classes with the .cls button and preview states such as :hover with the :hov button. The changes show on the page straight away, which makes it easy to test a fix before you edit your stylesheet. The Box Model view in the same tab shows margins, borders and padding, and lets you change those values as well.

Using both tools together works well: DevTools shows what the browser is applying, and the validator flags syntax mistakes and typos that the browser may be quietly ignoring.

Sources

Frequently asked questions

Is the W3C CSS validator free to use?

Yes. The W3C describes the CSS Validation Service as free software. You can use the hosted version on the W3C website, or download it and run it yourself as a Java program or servlet. Its source code is available, and it has an API for people who want to build their own tools on it, with a request to pause between calls or run a local copy.

Does a CSS warning mean my code is broken?

Not necessarily. The W3C validator separates errors from warnings. Warnings point to CSS that does not break the specification but may cause problems, for example a font-family list without a generic family at the end. You can control how many warnings are shown in the options. Errors are the items that do not match the selected CSS profile, so check which profile you are using.

💬 Got a problem?

aiwebpageseo.com is a data-driven SEO and AEO platform providing a free suite of technical website tools.