CSS Formatter
Paste minified or messy CSS and get it back with one declaration per line, consistent indentation and tidy braces.
Dieser Inhalt ist auf Englisch.
Durchgerechnete Beispiele
Minified rules
a{color:red;margin:0}.card>p,.x{padding:8px 16px}
a { color: red; margin: 0; } .card > p, .x { padding: 8px 16px; }
Two spaces, blank line between rules, each selector on its own line.
A media query
@media (min-width:600px){.nav{display:flex}.nav a{color:#fff}}
@media (min-width:600px) { .nav { display: flex; } .nav a { color: #fff; } }
Four space indent with no blank lines between rules.
Über CSS Formatter
This CSS formatter turns minified or untidy styles into code you can read. Each declaration goes on its own line, rules inside media queries and other blocks are indented, and spacing around colons and combinators is made consistent. It is the quickest way to read a stylesheet that was shipped in one long line.
You choose the indent width or tabs, whether the opening brace sits on the same line or the next one, whether to put a blank line between rules and whether selectors that share a rule are split over several lines. A last semicolon is added before each closing brace, which is valid and makes later edits easier. The CSS behaves exactly as before.
So verwenden Sie CSS Formatter
- Paste your CSS, or open a .css file.
- Pick the indent, brace style and spacing options.
- Copy the formatted CSS, or download it as a file.
Typische Einsatzzwecke
- Reading and reviewing a minified stylesheet from a live site
- Making generated CSS consistent before it goes into version control
- Cleaning up styles pasted from several sources
- Teaching or learning CSS with clearly laid out examples
Häufige Fragen
Does formatting change how the page looks?
No. Only whitespace is changed. The rules, their order and their values stay the same, so the page should look and behave as before.
How do I go back to a compact version?
Use the CSS minifier. Format for reading and editing, and minify when you publish.
Are comments kept?
Yes. Comments stay where they were in the file.
Does it work with nested rules and media queries?
Yes. Rules inside media queries, supports blocks and keyframes are indented one level deeper than the block that holds them.