# CSS Formatter

Paste minified or messy CSS and get one rule per block, one property per line, indented the way you like. Free, in your browser.

Use it at https://lobsite.com/tools/css-formatter

## How to use it

1. Paste your CSS, open a `.css` file, or start from the sample: a minified stylesheet.
2. Choose 2 spaces, 4 spaces or tabs. The formatted CSS appears as you type.
3. Copy it or download it as `styles.css`.

## What it does

Every rule gets its own block, every declaration its own line, and rules inside `@media` and other at-rules are indented a level deeper. Selectors, values and comments are kept as they are, so the stylesheet means exactly the same thing.

## When it helps

- Reading a minified stylesheet from a theme, a framework or a site you're inspecting.
- Tidying CSS before you edit it, so a change touches one line instead of one very long one.
- Comparing two stylesheets: format both, then diff.

## Frequently asked questions

### Does it fix invalid CSS?

No. It indents what's there; a missing brace stays missing. Browsers skip declarations they can't read, so a stray character usually breaks one rule, not the stylesheet.

### Does it sort properties?

No. Order can matter in CSS (a later declaration wins), so it's kept as written.

### Can I minify it again afterwards?

Yes: the [CSS Minifier](https://lobsite.com/tools/css-minifier) turns it back into one compact line.

### Is my CSS uploaded?

No. Formatting runs in your browser.