How to beautify CSS in WebStorm?

Question

I would like to beautify/reformat CSS code using WebStorm.

I have this CSS style :

.container {
  display     : grid;
  margin      : 0 auto;
  max-width   : 90rem;
  padding-top : 1rem;
}
.cols-2 {grid-template-columns : 50% 50%;}

.logo {font-size : 3rem;font-weight : 600;}
.slogan {font-size : 1.3rem; margin-top : 6px;}

.search {background-image : url("../images/search.svg");background-repeat : no-repeat;background-size : 35px;}

.content {min-height : 500px;}

I want to beautify it into this CSS style with WebStorm/IntelliJ:

.container {
  display     : grid;
  margin      : 0 auto;
  max-width   : 90rem;
  padding-top : 1rem;
}

.cols-2 {
  grid-template-columns : 50% 50%;
}

.logo {
  font-size   : 3rem;
  font-weight : 600;
}

.slogan {
  font-size  : 1.3rem;
  margin-top : 6px;
}

.search {
  background-image  : url("../images/search.svg");
  background-repeat : no-repeat;
  background-size   : 35px;
}

.content {
  min-height : 500px;
}

Are there any ways to accomplish this with standard settings or should I install some extensions?

Answer 1

You need to change the coding style of your project (set rules for what the project will look like) and then reformat the code.

There are tutorials on the Jetbrain website on how to do this.

for example:

• To change the coding style:Configuring code style or Code Style. CSS
• to reformat the code: Reformat and rearrange code

Answer 2

You must select 'On colon' from Align Values