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;
}
						

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