Organize CSS rules and declarations

Developers use CSS Formatter before a code review, debugging session or handoff to another contributor.

Organize CSS rules and declarations, so reviews, edits and debugging become easier. Use it for free in your browser, with no account required.

How to use

Paste your style sheet into the input area, or import one of the accepted code files.
Start the formatting run; rules and declarations come back with steady indentation and clear line breaks.
Read through the output and spot the blocks that looked crowded or out of order in the original file.
Copy the tidy version into your editor and compare it with the source before you commit anything.
Clear the input before pasting another file, so a single project fills the result area at a time.

Example

A developer inherits a style sheet written in one long rush, with everything packed onto a few lines. Paste it here, take the indented version back and read it block by block: selectors line up, and each declaration sits on its own line.

Limits and formats

Syntax errors are left untouched, so a missing semicolon stays missing after the pass.
This tool changes presentation only: it does not rename classes or delete rules you no longer use.
Accepted files include HTML, CSS, JavaScript, JSON and SQL, while a binary file will not be readable here.
On a very short sheet the automatic indentation adds little, so check that the output still behaves exactly like the input.

Where processing happens

Formatting runs inside your browser. The code you paste is not copied anywhere and it disappears when you close the page, so working on extracts from a private project carries no extra risk.

Frequently asked questions

Will formatting change how my page looks?

No. Only spacing, line breaks and indentation are touched. Selectors, properties and values stay exactly the same, so the browser reads the style sheet in the same way as before and the rendered page does not move.

Can I format a very large style sheet?

It depends mostly on the memory of your device, since all the work happens in the browser. On a big file the page may slow down; split the sheet into parts and run them one after another instead.

Why does the output still contain a very long line?

Some values simply are long, such as a font stack or a deeply nested function. The formatter does not break values apart inside a declaration; it concentrates on the structure of the rule blocks.