How to format CSS
- Paste your CSS into the box above, minified, hand-written or exported from a tool.
- Choose the indentation your project uses.
- Decide whether to keep or strip comments.
- Check the reported rule count against what you expected.
- Copy the formatted stylesheet, or download it as a .css file.
What this formatter does
- One declaration per line with consistent indentation throughout.
- Media queries and other at-rules indented inside their block.
- String contents left exactly as written, including spaces and semicolons.
- Comments preserved by default, or stripped when you ask.
- No reordering, merging or shorthand rewriting, behaviour is identical.
- Handles stylesheets of any size, live as you type.
Minified CSS is unreadable by design
A production stylesheet arrives as a single line tens of thousands of characters long. That is exactly what it should be for shipping and exactly wrong for reading. When you need to understand a rule, find where a colour is defined, or work out why a selector is losing a specificity battle, the first step is always to lay it out.
Formatting restores the structure that whitespace carries: which declarations belong to which selector, where a media query starts and ends, how deeply an at-rule is nested. None of it changes what the browser does.
Where formatting helps most
- Reading a third-party stylesheet or a framework you did not write.
- Recovering the shape of a production file when the source has been lost.
- Normalising a file that several people have edited in different styles.
- Preparing a stylesheet for review, where a diff on one enormous line is useless.
- Finding a rule you know exists but cannot see in the compressed version.
Deliberately conservative
This formatter reindents and nothing else. It does not reorder declarations, merge duplicate selectors, convert colours between formats, rewrite shorthand, or remove rules it thinks are redundant.
That restraint is the point. CSS is order-dependent in ways that are easy to underestimate, two rules with equal specificity are resolved by which comes last, and a "duplicate" selector later in the file may be deliberately overriding an earlier one. A tool that tidies aggressively can change rendering in ways nobody notices until a page looks wrong in production.
Strings and comments are handled properly
The formatter tokenises the stylesheet rather than running regular expressions over it, which matters more than it sounds. A semicolon inside a content: "a; b" string is not a declaration separator, and a brace inside a string is not a block boundary. Naive formatters break on both.
Comments are preserved by default, including licence banners at the top of a file, which you generally must keep for licensing reasons. Strip them only when the output is going straight to production and you have checked the licence terms.
Indentation conventions
Two spaces is the most widespread convention in CSS and keeps deeply nested media queries readable. Four spaces suits teams that use it elsewhere in their codebase. Tabs let each developer choose a width in their editor, which is why accessibility guidance tends to favour them.
Whichever you choose, consistency matters more than the choice. Mixed indentation produces diffs full of whitespace noise. When you are done reading, the CSS minifier compresses the stylesheet again for shipping, and the HTML formatter does the same job for markup. Nothing is uploaded at any stage.
Formatting before a code review
A stylesheet committed without consistent formatting produces reviews about whitespace rather than about styles. Worse, a later reformat produces a diff that touches every line, burying the two declarations that actually changed among hundreds that did not.
Agreeing one convention and applying it consistently avoids both problems. Run the formatter over a file once, commit that as a formatting-only change with nothing else in it, and every subsequent diff shows only real modifications. The same discipline applies to any generated or third-party stylesheet you have adopted into a project: normalise it on the way in, not later.