CSS Formatter / Beautifier

Format CSS (Cascading Style Sheets) file for better readibility and consistent

Description

CSS Formatter / Beautifier / Prettier

What is CSS ?

CSS = Cascading Style Sheets

In short, with CSS, the website will be more pleasing to the eye because CSS used to customize layout, appearance (such as color), and design of web pages.

The way a website look to the user can be controller by CSS, such as text alignment, the color, how big or small the text is, and many more. CSS also support more complex operation out of the box.

CSS is optional for HTML, but HTML is not optional to CSS, because without HTML, CSS is just bunch of code.

Fun fact: HTML initial release is 1993, and CSS initial release is 1996. Just imagine (or googling) how website looks without CSS (before 1996). And back then, HTML <table /> tag still very popular for designing website layout.

Sample of CSS code :

h2 {
  color: green;
  margin-left: 1px;
  padding: 1rem;
  border: 1px solid green;
}

Now the color of h2 tags in HTML document becoming green. Those CSS definition will adjust margin on left side, padding, and border as well. px, rem is few example of units on CSS (There are more of them).

Why you need to format the CSS ?

Formatted CSS will be easier to read, especially by the programmer. Hence the debugging or collaboration process can be much faster.

We can see that most website use minified CSS to save disk space and bandwidth. So the rule of thumb is for development we use formatted/pretty CSS, and for production we use minified CSS.

CSS Formatter / Beautifier