Online CSS Prettify

A compact CSS rule can be hard to scan when its selector and declarations run together. An online CSS prettifier changes the spacing and indentation of stylesheet text to make its rules clearer to scan.

I’ll show you how to format a small CSS rule online and what the output does and does not tell you.

TL;DR

Paste CSS into the input, select Prettify CSS, and inspect the output before using it. This tool rearranges whitespace with a simple text transformation, so it does not check whether the stylesheet is valid.

• Use it to make a compact rule quicker to scan.
• Compare the result with the input before replacing a source file.
• Choose a parser-based formatter for complex CSS or edits that must preserve every token.

What is a CSS prettifier?

A CSS prettifier changes how stylesheet text is spaced and indented so rules are simpler to scan. It does not change the job of a selector or property, and it is different from a CSS validator, which checks whether syntax follows CSS rules.

A CSS rule pairs a selector with a declaration block. The block holds property and value declarations inside braces, separated by semicolons. A formatter that understands this structure can lay out nested rules and at-rules without treating each brace or semicolon as an isolated text marker.

.card{color:navy;margin:0}

The example has one selector and two declarations. The embedded tool inserts line breaks around braces and semicolons, then indents lines after an opening brace.

How to prettify CSS online

The formatter is embedded on this page. Its input is on the left and the output field is on the right on a wide screen. On a narrow screen, the fields stack vertically.

Step 1: Paste a small CSS rule

Paste a compact rule into CSS Input.

a{color:red;}

Step 2: Select Prettify CSS

The button passes the input text to the page’s formatter function and places its return value in Formatted Output. I ran the exact transformation in Node.js against the compact rule above. The run printed the output shown next.

a{
  color:red;
}

The braces are on separate lines and the declaration is indented by two spaces. The function does not add a space after the colon, so this output is not the same style as every formatter.

Step 3: Inspect and copy the result

The screenshot shows the input and output fields with both buttons, not a tested output state.

Step 4: Clear both fields when you are done

Select Clear All to empty CSS Input and Formatted Output. If you need smaller output rather than readable source, use the CSS minifier instead.

What this CSS formatter does not check

The current embedded function uses regular-expression replacements and line endings to format text. It does not parse CSS grammar or report syntax errors.

I ran the transformation on one compact rule, which does not establish how every valid stylesheet will behave.

CSS syntax has both statement and block at-rules, and blocks can contain nested rules. If a stylesheet includes these constructs, use a formatter that parses CSS before printing it and inspect the diff before saving over the original.

Common formatting limits and next steps

When the output changes comments or punctuation you need, do not replace the source file with it. Keep the original, then format the stylesheet with a parser-based option such as Prettier’s CSS formatter and review the resulting diff.

Keep the original file until the formatted result passes your project checks. The next checks are available from these sources:

• Prettier documentation explains its CSS formatting support.
• MDN CSS syntax guide describes stylesheet rules and at-rules.

Conclusion

Use the online formatter to make a small CSS snippet simpler to inspect, then compare its output with the source. For project stylesheets, a parser-based formatter and a project check are safer choices because this tool only rearranges text.

CSS prettifier FAQs

These answers separate the tool’s visible formatting action from checks that require a CSS parser.