CSS Formatter

Neatly align CSS code by rules and properties.

Category: Dev Tools

When to use?

Use it to expand minified CSS to check selectors and properties, or to format CSS into a consistent style before review.

How to use

  • Paste the CSS code.
  • Press format to align by selector and property.
  • Copy the tidied CSS.

Input Explanation

Paste CSS that is minified on one line or misaligned.

Calculation Basis

It parses the CSS, separates selector declarations and property-value pairs inside braces, and applies line breaks and standard indentation per property for readability.

Usage Examples

  • Debug styles - Expand minified CSS to quickly check selectors and properties.
  • Quick pre-deploy check - Check inputs and output to reduce errors before dev/ops work.
  • Aid docs/reviews - Copy the tidied result into dev docs, issues, or review comments.

Examples

  • ".box{color:red;margin:0;}" → structured CSS with selector and properties on separate lines
  • One-line minified CSS → readable code split by rule and property

Cautions

  • Generated output is for reference; test carefully before production use.
  • CSS tidying runs only in the browser and is not sent to a server.

Guides

CSS formatting

It aligns CSS rules to make properties and values readable. Unifying selectors, property order, and indentation improves code quality.

CSS minify

It removes unnecessary whitespace and comments to reduce CSS file size. Using minified CSS before deploy improves page load speed.

FAQ

Are at-rules supported?

It formats common CSS syntax like @media and @supports.

Is the pasted CSS sent out?

No. CSS tidying runs only in the browser and is not sent out.

What is the indentation basis?

It uses 2-space indentation following Prettier standard rules.

Can minified CSS be expanded?

Yes, one-line minified CSS is split by rule and property for readability.

Related Tools