Developer guide

How to format CSS for easier review

Good CSS formatting makes selectors, declarations, nested rules, and at-rules easier to scan without changing what the stylesheet is intended to do.

Open the CSS Formatter

What CSS formatting changes

A formatter parses CSS and prints it with consistent whitespace, indentation, braces, and line breaks. It does not improve selector architecture, remove unused rules, or prove that every property works in every browser.

Formatting is especially useful before code review, after copying compressed CSS, or when a generated stylesheet needs inspection. Because the source is parsed, malformed syntax should be corrected rather than guessed around.

How to format CSS

  1. Paste plain CSS or open a UTF-8 .css file.
  2. Choose two spaces, four spaces, or tabs to match the project convention.
  3. Select Format CSS.
  4. Review selectors, custom properties, strings, and nested rules in the result.
  5. Copy or download the formatted stylesheet, then test it in the target site.

The ToolPixels formatter uses a CSS parser and never applies the submitted rules to the page. URLs in the source are not fetched.

Before and after formatting

Compact input

.card{padding:1rem;color:#191919}@media (max-width:600px){.card{padding:.75rem}}

Readable structure

.card {
  padding: 1rem;
  color: #191919;
}

@media (max-width: 600px) {
  .card {
    padding: 0.75rem;
  }
}

The printed form makes the media-query boundary and declaration order obvious. A formatter may normalize small style details while preserving the parsed meaning.

Formatting is not linting

TaskWhat it answers
FormatterIs the source printed consistently?
LinterDoes the source follow project rules?
Validator or browser testIs syntax supported and behavior correct?

Use a linter for duplicate declarations, naming conventions, or compatibility policies. Use browser testing for layout and cascade behavior.

CSS formatting pitfalls

  • Do not feed Sass or Less syntax to a plain CSS parser.
  • Do not assume formatting resolves specificity or cascade problems.
  • Review whitespace-sensitive custom property values and unusual emerging syntax.
  • Avoid mixing indentation styles in the same repository.

Use CSS Formatter in your browser

Format plain CSS locally with selectable indentation, then copy or download the result for review.

Format CSS now