About CSS Formatter

Format CSS with proper indentation. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend teams enforcing consistent CSS formatting across projects
• Developers formatting CSS before committing to version control
• Designers converting inline styles to properly formatted stylesheets
• Students learning CSS structure through well-indented examples

Tips

• Choose between single-line and multi-line rule formatting
• Ensure consistent spacing around colons and semicolons
• Format vendor-prefixed properties with proper alignment

Fun Facts

• CSS Grid Layout, first proposed in 2011 by Microsoft, didn't achieve cross-browser support until 2017.
• The cascading in CSS refers to a priority algorithm with over 10 levels of specificity, including the !important override.
• Flexbox went through 3 major syntax revisions (2009, 2011, 2012) before reaching its current stable specification.

FAQ

Does the formatter validate my CSS?

No — it formats any CSS-shaped input, including invalid rules. Use a linter (Stylelint) for validation.

Will it sort properties alphabetically?

Not by default. Alphabetical ordering is a team style choice — toggle 'sort properties' if you want it, but leave off to preserve logical grouping (layout, box model, typography, colors).

How does it handle @media and @supports blocks?

Nested block structure is indented one level deeper. Media queries stay in source order; the formatter doesn't merge or reorder them.

Is the output Prettier-compatible?

The defaults match Prettier's CSS output for 2-space indentation. If your repo uses Prettier, run it after this tool for full consistency.