CSS Formatter

What Is CSS Formatting?

CSS formatting is the process of adding consistent indentation, line breaks, and spacing to Cascading Style Sheets so that the code is readable by humans. Browsers ignore whitespace in CSS entirely. A minified one-liner and a neatly indented stylesheet produce identical rendering. The difference is readability: formatted CSS lets you scan selectors, spot missing semicolons, and understand the cascade at a glance.

A CSS formatter (sometimes called a CSS beautifier or pretty-printer) takes compressed or inconsistently styled CSS and rewrites it with uniform indentation, one declaration per line, and consistent brace placement. This is the reverse operation of minification, also called beautification or pretty-printing. While minification removes whitespace to reduce file size for production, formatting restores structure for development, code review, and codebase maintenance.

The CSS specification (W3C CSS Syntax Module Level 3) defines the grammar for stylesheets, but says nothing about whitespace conventions. Formatting rules are a team decision: tabs vs. spaces, 2-space vs. 4-space indent, brace style, blank lines between rule sets. A formatter enforces whatever convention you choose, consistently across every file. Most teams codify their choice in a .prettierrc or .editorconfig file.

Why Use This CSS Formatter?

Paste any CSS and get properly indented output in milliseconds. No editor plugins to install, no configuration files to write, no accounts to create.

CSS Formatter Use Cases

CSS Property Ordering Reference

Most CSS formatters do not reorder properties. But many style guides recommend grouping related properties together. The table below shows a common grouping convention used by tools like Stylelint's order plugin and CSScomb:

This grouping is a convention, not a CSS requirement. Browsers apply declarations based on specificity and source order, regardless of property position within a rule block. A formatter focuses on whitespace and indentation; property reordering is a separate linting concern handled by tools like Stylelint.

CSS Formatting vs. CSS Minification

Formatting and minification are inverse operations, applied at different stages of development:

Code Examples

How to format CSS programmatically in different languages and environments:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

Frequently Asked Questions