Prettify a one-line rule set
Input
body{margin:0;padding:0;}h1{color:red;} Output
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
} Useful when CSS is compressed into one line.
Developer Tools
Review practical CSS Prettify examples so you can understand expected input, output, and common patterns faster.
Use this CSS Prettify tool to turn compact or messy CSS into a cleaner readable layout. It is useful for debugging copied styles, inspecting generated rules, cleaning one-line CSS, and making selectors and declarations easier to scan before editing or sharing.
Example pages are especially useful for developer tools because they show what good input looks like, what kind of output to expect, and how the tool behaves in common scenarios.
Input
body{margin:0;padding:0;}h1{color:red;} Output
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
} Useful when CSS is compressed into one line.
Input
@media screen and (max-width:600px){.card{padding:12px;}} Output
@media screen and (max-width:600px) {
.card {
padding: 12px;
}
} Makes media-query styles easier to inspect.
Fix: Check whether each rule block opens and closes correctly.
Fix: Use it for readability first, then review broken syntax manually.
Fix: Review non-standard syntax carefully after formatting.
After reviewing these examples, run the live tool with your own input. If your task involves a follow-up step, the related page can help you move to the next tool in the workflow.
Open the main CSS Prettify page and test your own real input.