About CSS Pretty Print

Pretty print CSS with color coding. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Developers presenting CSS architecture in team meetings
• Technical writers creating color-coded CSS examples for docs
• Frontend mentors demonstrating selector specificity visually
• Bloggers embedding syntax-highlighted CSS in tutorial posts

Tips

• Use color coding to distinguish selectors from properties
• Toggle between dark and light themes for screen comfort
• Enable line numbers for referencing specific CSS rules in reviews

Fun Facts

• The first browser to fully support CSS1 was Internet Explorer 5 for Mac, released in March 2000.
• CSS custom properties (variables), specified in 2012, weren't widely supported until 2016 when all major browsers adopted them.
• A single CSS selector can theoretically have infinite specificity through repeated class chaining like .a.a.a.a.

FAQ

How is pretty-print different from format?

Pretty print adds syntax highlighting and optional property sorting. The formatter only indents. Use pretty-print for docs/code-review; formatter for commits.

What gets colored?

Selectors, properties, values, units, and comments each get a distinct color. The copy output is plain text — colors are for display only.

Does it handle CSS variables and calc()?

Yes — var() and calc() are highlighted as expressions. Nested calc() and min()/max() format correctly.

Can I print the result?

Yes, browser print produces the colored output on A4/Letter. Useful for whiteboarding a design system or printing snippets for a code review.