CSS Beautifier Guide: From One Line to Readable Rules
Learn how expanding rules and indenting declarations makes a stylesheet easier to edit.
What is the CSS Beautifier?
This tool breaks each rule onto its own lines, puts every declaration on its own line, and indents declarations by two spaces inside their rule. It also adds a space after the colon in declarations, so margin:0 reads as margin: 0. It handles nested blocks such as media queries by tracking brace depth. It does not sort properties, merge duplicate rules or validate selectors, so it is a readability aid rather than a CSS linter.
How to use it
- Paste your CSS into the box.
- Click Beautify CSS.
- Read the expanded rules.
Worked example
For the sample, the two rules expand to separate blocks, each declaration on its own indented line, with margin:0 shown as margin: 0.
Why expand CSS that already works compressed?
Because compressed CSS is hard to scan and edit safely. Expanding it costs nothing at edit time and you can minify again before publishing.
Frequently asked questions
Does it sort or merge my rules?
No. Rules stay in the order you gave them, and duplicates are not merged.
Does it handle media queries?
Yes, for ordinary nesting: brace depth is tracked, so rules inside a media block are indented one level deeper.