Online CSS Formatter and Minifier

Css Formatter And Minifier

CSS formatter and minifier is a free online tool, to format CSS with custom indentation levels and minify CSS.
This tool contains several features like syntax highlighting, autocomplete recommendation and minifying CSS.
There are three levels of minifying options level 0, level 1, and level 2.
At each level, different optimization rules are applied for minifying CSS.

Example CSS


.toastify {
    padding: 12px 20px;
    color: #fff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .12), 0 10px 36px -4px rgba(77, 96, 232, .3);
    background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
    background: linear-gradient(135deg, #73a5ff, #5477f5);
    position: fixed;
    opacity: 0;
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647
}


#file-upload-object {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
    cursor: pointer
}

This advanced CSS formatter tool is a full-fledged text editor in which you can search for particular text, jump to a particular line, delete all the contents of the editor, copy the text contents of the editor, wrap the line, and you can make the editor full screen and full-screen window mode.
This advanced editor supports CSS syntax highlighting for better understandability.
You can download the CSS in the editor as a text file, css file, and pdf file formats. All you need to do is to choose the file type from the dropdown and click on the Download Icon
in the respective editor.
You can name the download file as you wish. Enter the download file name in the download file name text box.
You can format or beautify the CSS using the , Minify the CSS code using the minify button.
You can auto-format or beautify the CSS by checking the auto-beautify on the edit checkbox.
You can also auto minify CSS by checking the auto-minify on edit checkbox.
In case of an accidental reload of this website, editor preserves the input CSS code and populate the editor with the last entered CSS.
This pretty print tool prettify the CSS.

What is CSS?

CSS is a styling language to style web pages, while HTML forms the skeleton of the webpage.
You can inline the CSS within the HTML page, or you can add it as an external style sheet using link tag in Html.
You can also include CSS styles in the style attribute in the HTML tag.
The mime type of CSS is text/css.
You can change the layout and look of the webpage to look different in different screen sizes using CSS.


.searchVisibility {
    opacity: 0;
    display: none
}

#searchLeft, #searchRight {
    opacity: 1;
    transition: opacity 300ms ease-in
}

.searchActions, .searchBox, .searchOptions {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    justify-content: space-around
}

You can use the id, class, and element name to target the particular element in the HTML for which you need to apply the CSS.
CSS is often used alongside HTML and javascript to get a fully functional web app.
CSS 3 is the latest version in use.

Minifier Options

level 0 – Applies no optimization to minify CSS.
level 1 – Applies level 1 optimization to minify CSS.
level 2 – Applies level 2 optimization to minify CSS.

Level 0 :

Level 0 applies no optimization to input css.

Level 1:

Level 1 applies the following optimization techniques.

Normalizes the url.
Optimizes the background property.
Optimizes the border radius property.
Optimizes the filter property.
Optimizes the font property.
Optimizes the font weight property.
Optimizes the outline property.
Removes the empty rules.
Removes the negative padding.
Controls removing quotes when unnecessary.
Removes the unused whitespaces.
Removes redundant zeros.
Replaces the time units with shorter values.
Replaces the zero values with units.
Rounds the pixel values to ‘N’ decimal places.
Preserves the comments starts with /* !… */ .
Optimizes the rules starts with @ (e.g: @media, @charset ) .

Level 2:

Level 2 optimization applies level 1 optimization as well.

Merges the adjacent rules.
Merges the properties to short hands.
Merges @media query.
Merges non adjacent rules.
Controls the semantic merging.
Controls the property overriding.
Controls the non-adjacent rules merging.
Removes the duplicate @font-face rules.
Removes the duplicate @media rules.
Removes the duplicate rules.
Removes the unused rules.
Controls the rules restructuring.

CSS Syntax

CSS uses selectors to identify the html tag, to apply the CSS styles, which are interpreted by the browser.
Class selector starts with dot operator, id selector starts with the # operator and element selector starts with the element name.
Example :


.searchVisibility {
    opacity: 0;
    display: none
}

#searchLeft {
    opacity: 1;
    transition: opacity 300ms ease-in
}

button, select {
    text-transform: none
}

Mime type for CSS files is “text/css” as defined in MDN
.
Extension for CSS file is fileName.css .

What You Can Do?

Format / Beautify CSS
Minify CSS with several options
Download the CSS as .css file, .txt file and as pdf file.

Limitations

When you try to upload file greater than 5MB, you will not be able to edit in the text editor as browser will not be able to handle large text and cause the browser to freeze.
But you can still format/beautify, minify, and download CSS.
If you try to download the large file as pdf, it may take some time to prepare the pdf. Please be patience.