CSS Formatter

CSS Formatter Online

CSS Formatter is an Online tool for formatting CSS with chosen indentation, it will format given compressed CSS in human-readable form for easy reading. It is also highly configurable CSS formatter with ton of customisations.

To format CSS online just past the CSS in input and click format button, the formatted CSS will be displayed in output editor. The editor is will highlight CSS elements for easy visualisation.

All the formatting is happening in browser and data is not sent to server.

CSS Beautifier

Beautify CSS is also called as unminify CSS as it is reversing the process of minification. Here in CSS beautifier the online tool will add necessary space, line breaks and indentation for easier reading visualisation of the code.

CSS Formatter Options

The default formatting are based on google code style recommendation, it includes using two space indentation level, sorting method etc. Below are each options in details.

• Selector Storing Methods - Sorts the methods in order.
• Round Precessions - By default rounds to 4 digit precision.
• Removes empty blocks - Remove blocks without any statements.
• Line Breaks - Adds line breaks after and before new blocks, new rules, between selectors.

Additional customisation line merge duplicate rule and removing duplicates rules can be enabled if needed.

Below is example formatting

/*! Uncheck "Preserve Special Comments" in options to remove this comment */
.dark {
  /** This comments will be removed */
  background: #121212;
  padding: 10px 20px 10px 20px; /** converted to padding: 10px 20px; */
}
.empty {
  /** This block is so it will be removed */
}

Below is beautified CSS

/*! Uncheck "Preserve Special Comments" in options sections to remove this comment */
.dark {
  background: #121212;
  padding: 10px 20px
}

To convert formatted CSS to compressed or minified CSS use our - CSS Minifier Online Tool.