Format CSS rules and declarations with consistent indentation. Make compressed styles easier to review without applying them to the page.
How to use
Paste the stylesheet and generate the formatted result. Fix reported syntax errors, then compare the output with the source before saving it.
Example
body{color:red;margin:0} becomes a rule with each declaration on its own line and consistent spacing.
FAQ
Does formatting check my design?
No. Parsing finds syntax problems but does not test browser support, visual layout, or conflicting selectors.
Related tools
A practical task
When reviewing a long rule, look at property groups rather than line count. Consistent indentation exposes nested conditions and makes duplicate declarations easier to notice. A formatter will not decide which of two conflicting declarations expresses your design.
Another useful question
Can I format a full HTML page here?
Use the CSS portion or the HTML formatter. A language specific parser expects a stylesheet, not an arbitrary document containing style tags.
Details for interpreting the result
| Detail | Explanation |
|---|---|
| CSS cascade | The same selector can appear more than once for a reason. Order, specificity, media queries, and inheritance all affect the result. A shorter or neater stylesheet still needs a check in its actual page. |
| Formatting and behavior | A formatter changes presentation of source code. It does not prove that a program calculates the right value or that a page looks correct. Keep behavior checks separate from indentation and spacing checks. |
| Readable and compact source | Minification produces a compact delivery copy. Keep the readable source for maintenance and rebuilding. Editing only a compressed copy makes reviews harder and loses the useful context removed with comments. |
| Comments in source files | Comments can contain licenses, build notes, and explanations as well as disposable text. Before removing them, check the obligations of bundled assets and keep important notices in the appropriate source or distribution file. |
| Preview boundaries | A restricted preview can block scripts, external images, fonts, and other resources. That keeps the preview separate from active page behavior, but it also means it is not a faithful copy of every production layout. |
| Source boundaries | A summary or rewrite works from the material you provide. A URL alone does not supply the full article in this interface. Include the relevant passage and keep citations attached to the claims they support. |
| Source and output versions | A transformation creates a new representation of the supplied material. Keep the original when the operation removes structure or characters. An output with missing information cannot always reconstruct the input that produced it. |