# CSS Formatter

Format minified or messy stylesheets with this CSS Formatter. Paste CSS and the tool parses it, then prints every rule with its selector on one line, one declaration per line indented by two spaces, a space after each colon, spaced combinators and nested at-rules such as media queries. Parse errors are reported. Ideal for web developers and designers reading, debugging or reviewing stylesheets from any source.

## Frequently asked questions

### How does the CSS Formatter work?

It parses your stylesheet into rules, declarations and at-rules and prints them again in a consistent layout. Because the CSS is parsed, the output reflects the real structure of the stylesheet.

### What does the formatted CSS look like?

Each rule starts with its selector and an opening brace, each declaration goes on its own line with two space indentation and a space after the colon, and the closing brace gets its own line. Selector lists are joined with a comma and a space, and combinators such as > and ~ get spaces around them.

### Are media queries and other at-rules supported?

Yes, rules inside @media, @supports and similar blocks are nested and indented. Statements such as @import are kept on one line, with url() values written in quotes.

### What happens with invalid CSS?

When the parser cannot read the stylesheet, for example because a brace is missing, the tool stops and shows the parser message with the line number. Fix the reported spot and format again.

### Are comments preserved?

Yes, comments are kept, both between rules and between declarations. Each comment is placed on its own line at the indentation of the code around it.

### Are custom properties supported?

Yes, custom properties such as --brand-color are formatted like any other declaration. References such as var(--brand-color) are kept as written.

### Can I format SCSS or Less here?

No, this page expects plain CSS, and nested rules or variables from preprocessors may be rejected. Use the SCSS Formatter or the Less Formatter for those files.

### Can I change indentation or brace style?

No, the formatter has no options and always uses two spaces with the opening brace on the selector line. That keeps results consistent for every stylesheet.

### Why is the result wrapped in a css code fence?

The output is returned as a Markdown code block marked css, so it renders highlighted in Markdown. Copy the lines between the fences for your .css file.

### How large can my stylesheet be?

Up to 5 MB per run, and larger input is rejected with a message. The output is identical to the CSS option of the Code Formatter.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)