CSS Formatter

What this does

So you have got a stylesheet that someone squashed onto a few lines, or that grew messy as you hacked at it, and now it is hard to read. This tidies it up. Paste your CSS, click Format, and you get it back with each rule laid out cleanly, properly indented, and easy to scan.

How to use it

1. Paste your CSS into the box.
2. Click Format.
3. Copy the cleaned-up stylesheet with the Copy button.

How it works

The formatting is done by a library called cssbeautify, which reindents and spaces out your styles to a consistent shape. It uses four space indentation, keeps each opening brace on the same line as its selector, and quietly adds any semicolons you forgot at the end of a declaration. It all happens in your browser, so your styles are not sent to any server.

What it tidies, and what it does not

What you get is consistency. Every selector sits on its own line, every property is indented under it, and the spacing around colons and braces is made uniform, so a rule you can barely read becomes something you can follow at a glance. That consistency is what makes a stylesheet easy to review, and easy to diff when you commit it.

It is worth being clear about the limits. This reformats the layout of your CSS, it does not check whether your CSS is correct. If you have a misspelled property or a value a browser will ignore, the formatter will happily lay it out neatly anyway. Think of it as tidying the room, not inspecting the wiring.

A quick example

Here is a rule crammed onto one line:

.btn{color:#fff;background:#0a7;padding:8px 16px}

And the same rule after formatting:

.btn {
    color: #fff;
    background: #0a7;
    padding: 8px 16px;
}

Same styles, far easier to read, and notice the semicolon added after the last value.

Questions people ask

References

1. MDN Web Docs. CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS
2. Sencha. cssbeautify: Reindent and reformat CSS. https://github.com/senchalabs/cssbeautify