CSS Shorthand: Font, Background, List Style and More

Not using shorthand CSS is I think the most common mistake that we do as a web developer. Shorthand for CSS properties like font, background, border and more are oftentimes ignored and not even know the syntax is. The advantage of shorthand CSS is to save lines of code and not to mention that you can easily update them. Here are some css shorthand samples:

FONT:

Syntax:

  
.body{
 font: font-style font-variant font-weight font-size/line-height font-family;
}

Sample:

  
.body{
 font: normal small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

BORDER:

Syntax:

  
.myClass{
  border: border-width border-style border-color;
}

Sample:

  
.myClass{
  border: 1px solid #CCC;
}

BACKGROUND:

Syntax:

  
.body{
 background: background-url background-repeat background-attachment background-position background-color;
}

Sample:

  
.body{
 background: url('image/sample.png') no-repeat scroll 0 0 #FFF;
}

LIST-STYLE:

Syntax:

  
.mylist{
  list-style: list-style-type list-style-position list-style-image;
}

Sample:

  
.mylist{
  list-style: disc outside url('images/test.png');
}