Home Indentation and Spacing in CSS

Indentation

Spacing and indentation should be consistent throughout your code. Many developers choose to use 4-space or 2-space indentation.

Here are three examples of bad indentation in CSS:

div {
 font-size: 18pt;
  color: #222222;
}

  img {
width: 50%;
  }

p {
font-family: Helvetica, Arial, sans-serif;
font-size: 14pt;
}

Here are some examples of good indentation in CSS:

div {
  font-size: 18pt;
  color: #222222;
}

img {
  width: 50%;
}

p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14pt;
}

Line Formatting

One Line Per Rule

Each CSS rule should be on its own line. If a CSS rule has multiple values (e.g., multiple font families), these should be on the same line as the corresponding rule.

a { color: #111111;
    font-size: 16pt;
}

div {
  color: #222222; font-size: 18pt;
}

p {
  font-family: Helvetica,
               Arial,
               sans-serif;
}

a {
  color: #111111; 
  font-size: 16pt; 
}

div {
  color: #222222; 
  font-size: 18pt; 
}

p {
  font-family: Helvetica, Arial, sans-serif;
}

Blank Lines

Place a blank line between each CSS selector. You should neve rhave more than one blank line in a row.

a {
  color: #111111; 
  font-size: 16pt; 
}


div {
  color: #222222; 
  font-size: 18pt; 
}
p {
  font-family: Helvetica, Arial, sans-serif;
}

a {
  color: #111111; 
  font-size: 16pt; 
}

div {
  color: #222222; 
  font-size: 18pt; 
}

p {
  font-family: Helvetica, Arial, sans-serif;
}

Spacing

Whitespace

Place a line break after a { or }, and between each property declaration. Place spaces between selectors and { }. Place a space after a colon or a comma. Place a semicolon after every property declaration.

p,h1{color:red; font-family:serif; font-size:16pt;}
a {text-decoration:none}
.section-title
{
  text-decoration: underline;
}

a {
    text-decoration: none;
}

h1, p {
    color: red;
    font-family: serif;
    font-size: 16pt;
}

.section-title {
  text-decoration: underline;
}