CSS Formatter
Format and beautify CSS stylesheets.
Last updated:
About the CSS Formatter
Stylesheets that have been minified for delivery, or written quickly under deadline, become hard to scan long before they become hard to run. This lays rules, selectors and declarations out one per line with consistent indentation and spacing around braces and colons, changing whitespace only, so the compiled result is byte-for-byte equivalent in effect. Declaration order is preserved throughout, which is not a detail: later rules of equal specificity override earlier ones, and reordering them would silently change how the page looks. Reach for it when reviewing a stylesheet in a pull request, when picking apart a third-party theme, or when a compressed file has to be edited by hand. What it will not do is tell you a property is misspelled or a value is invalid — formatting is blind to meaning, and your browser's dev tools, which show which declarations were actually applied, are the better instrument for that.
How to use it
- Paste your CSS.
- Format, then copy the result.
Things worth knowing
- Declaration order is preserved, which matters because later rules of equal specificity override earlier ones.
- Formatting will not flag an invalid property or a typo'd value — your browser's dev tools are better for that.