How to Format and Beautify CSS
Step-by-step guide to auto-formatting compressed or messy CSS into a clean, readable style using the DevHexLab CSS Formatter.
Tool Used
CSS Formatter
1
Open the CSS Formatter
Navigate to /tools/css/css-formatter.
2
Paste your CSS
Paste minified or poorly formatted CSS into the input area.
3
Format
Click Format. Each rule is expanded onto its own lines with consistent indentation, property spacing, and selector formatting.
4
Copy the formatted CSS
Click Copy to grab the readable CSS. Use this before committing CSS to source control or reviewing a colleague's stylesheet.
All done!
You are ready to use CSS Formatter like a pro.