About the CSS Formatter

Format CSS with your preferred indentation and quotes.

How to use the CSS Formatter

1. Paste your code into the input box, or click Sample to load an example.
2. Set the Indentation Size and Quote Type, and options such as Sort Properties A-Z.
3. Press Process & Format CSS.
4. Use Copy (or Download where shown) to keep the result. Clear empties the box.

When to use the CSS Formatter

• Making minified CSS from a live site readable while you learn from it or debug it.
• Applying one consistent style to stylesheets written by different people.
• Sorting properties alphabetically so that large files are easier to scan.
• Cleaning up CSS pasted from a design tool or an online example.

Common mistakes to avoid

• Formatting a file that has syntax errors. Missing braces can produce confusing output, so run the CSS Validator first.
• Sorting properties without checking the cascade. Order can matter when the same property is declared twice in one rule.
• Overwriting the original without a backup or version control.

Tips

• Use the CSS Validator to check for errors after formatting.
• Group related rules together and add short comments for sections.
• Use consistent quote types for fonts and content values.