CSS Beautifier

The CSS Beautifier takes minified or messy stylesheet code and lays it out with one declaration per line and two-space indentation, so you can see which properties belong to which selector. It is most useful for reading a compressed theme or plugin file, such as a style.min.css, when you need to find the rule that sets a colour or margin.

Before and after

The sample input body{margin:0;padding:0}a{color:red} comes out as:

body {
  margin:0;
  padding:0
}
a {
  color:red
}

Nested blocks get deeper indentation. A media query such as @media (max-width:600px){.nav{display:none}.menu a{padding:8px 12px;color:#333}} becomes:

@media (max-width:600px) {
  .nav {
    display:none
  }
  .menu a {
    padding:8px 12px;
    color:#333
  }
}

Exactly what gets changed

• A space and line break are added after each opening brace, a line break after every semicolon, and each closing brace goes on its own line.
• Indentation follows the brace depth, two spaces per level.
• Nothing is renamed, reordered or removed. Property values stay exactly as written, so margin:0 keeps its missing space after the colon and a final declaration without a semicolon stays that way.
• Comments are kept, although a comment may end up on the same line as the selector that follows it.

Where the formatting can go wrong

The beautifier splits lines at every semicolon, including ones inside values. A data URI like url(data:image/png;base64,…) is broken across two lines, and a line break inside url() or a quoted string makes that declaration invalid. The same happens with content: ";". Read the formatted output freely, but if you plan to save it as your working file, rejoin those values first.

It also doesn't validate. A missing closing brace makes the indentation of everything after it drift one level to the right, which is actually a quick way to find the spot where the brace went missing.

The indentation is also the fastest way to answer a common debugging question: does this rule apply everywhere, or only inside a media query? In a minified file the @media wrapper may be hundreds of characters away from the selector you found. After beautifying, any rule indented under an @media or @supports line only applies when that condition is true, which often explains why a style works on desktop but not on mobile.

A practical workflow

1. Beautify the minified file and search it for the selector or colour you need.
2. Make your change in the readable version, or better, in your own source file or child theme.
3. Compress it again for production with the CSS Minifier.

Browser developer tools can also pretty-print a stylesheet, but pasting the code here gives you a plain-text copy you can keep, compare with an older version, or send to a colleague. For page markup, the HTML Formatter does the same job.