CSS formatter

 

This tool allows you to minify and beautify your CSS file. You can download minified and beautified CSS.

Copy and paste, drag and drop a css file or directly type in the "Your CSS" editor below.




User guide

Step 1 - You can drag and drop, or directly type in the editor in order to minify or beautify your CSS.

Step 2 - Click on "Beautify" or "Minify" buttons to format your CSS.

Step 3 - You can copy to clipboard or download the desired result by clicking on the "Download" and "Copy to clipboard" buttons.

About CSS

CSS (Cascading Style Sheets) is a style sheet language that describes the style of an HTML document (Or other markup languages).CSS describes how HTML elements should be displayed.

CSS is designed to enable the separation of presentation (layout, colors, and fonts) and content.

A style sheet consists of a list of rules. Example:

h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
	font: inherit;
	vertical-align: baseline;
	color:gray;
}

input[type='text'], select
{
	min-width:170px;
}
						

Over the past 20 years, the CSS language has evolved a lot.Compared to these beginnings, the possibilities offered by CSS are incredible. It is now possible to make visuals that adapt to all media in a few lines.At one time, you had to use JavaScript code to obtain certain behaviors, it was not easy, and the result was sometimes random depending on the browsers!

Why minify css ?

Minification is the process of removing all unnecessary characters from source code without changing its functionality. It removes white space, new line and comments.The process of minification generates a much smaller CSS.

Minification is a bandwidth optimization technique that reduces the amount of data that needs to be transferred.It optimizes your site speed, it is a SEO factor.

We use the JavaScript CSS minifier csso (CSS Optimizer). This library performs three sort of transformations: removing redundant, replacement for shorter form and restructuring code.


Why beautify css ?

When a source code is minified, it is difficult to read and understand.Beautify your CSS for easier reading.

This tool uses the cssbeautify library cssbeautify.

You can report a bug or give feedback by adding a comment (below) or by clicking "Contact me" link (at the top right hand corner of the page).

Comments