How to Format CSS with a CSS Formatter

Why format CSS

CSS Formatter helps turn hard-to-scan stylesheet text into a more consistent layout. It supports configurable indentation and two output approaches: beautification for readability and minification for a more compact result. This makes it useful when you are reviewing a stylesheet, comparing formatting changes, or preparing CSS for another editing task.

Submit the stylesheet as the primary CSS input, then choose the indentation and mode that fit your purpose. An empty or whitespace-only submission follows a separate successful path and returns an empty formatted result, so it does not produce stylesheet content from blank input.

Steps for formatting a stylesheet

1. Enter the stylesheet in the primary input as a string. If that primary value is falsy and a separate legacy CSS value is truthy, the legacy value can replace it; a non-string primary value that is not replaced can fail type validation.

2. Set the indentation value before running the request. For non-whitespace-only CSS, the value is converted to an integer, and a value that cannot be converted or falls outside the inclusive range from 0 through 8 is replaced with 2. Values from 0 to 8 therefore provide the supported indentation range for non-empty formatting.

3. Select the output mode. A falsy mode uses beautification, while a string mode is lowercased before it is interpreted. The exact minify mode removes block comments, collapses whitespace, and removes surrounding whitespace around braces, semicolons, and colons. Other successfully normalized mode values use beautification.

4. Run the formatter and inspect the returned result. Non-whitespace-only CSS larger than 1,000,000 UTF-8 bytes fails before formatting, and non-empty input also depends on the underlying beautifier being available. A failure in that dependency condition can occur before either output mode is processed.

5. If the result is empty, first check whether the submitted value was empty or contained only whitespace. After any applicable legacy CSS fallback, that input succeeds with an empty formatted result and zero input and output sizes. It returns before size checks, indentation normalization, mode normalization, and dependency checks, so those settings do not turn blank input into formatted CSS.

How to interpret the formatted output

Beautification should make declarations easier to scan by applying consistent indentation and line breaks to valid requests. The selected indentation is relevant to non-whitespace-only input, whereas blank or whitespace-only input returns before that setting is normalized.

Minification has a narrower, observable effect: it removes block comments, collapses whitespace, and trims whitespace around the specified CSS punctuation. Read the result as a formatting transformation rather than as a report about whether the stylesheet is valid, compiled, standards-compliant, semantically preserved, or equivalent after a round trip. Check important output against the source when the transformation matters to your work.

Worked example

A developer has a compact stylesheet and submits it with two-space indentation to obtain a more readable arrangement of its declarations.

Submit a non-empty CSS string containing one selector and declarations, set indentation to 2, choose beautify mode, and run the formatter.

The response contains formatted CSS text in beautify mode, with declarations arranged in a more consistently indented layout.

Limitations

• The output is a formatting transformation rather than a validation or compilation report, so it does not establish standards compliance, semantic preservation, or round-trip equivalence.

Common errors

• A request can fail when a non-empty primary value is not a string or when the CSS exceeds 1,000,000 UTF-8 bytes; submit stylesheet text as a string and reduce oversized input before trying again.

FAQ

What happens when I submit empty CSS?

After any applicable legacy CSS fallback, empty or whitespace-only input succeeds with an empty formatted result and zero input and output sizes. This path runs before size, indentation, mode, and dependency checks.

Which indentation values are supported?

For non-whitespace-only input, the formatter converts the indentation setting to an integer. A non-convertible value or a value below 0 or above 8 is replaced with 2.

What does minify mode do?

A different successfully normalized mode value uses beautification instead.