CSS Shorthand Guide

In my previous post, “CSS Formatter and Optimiser” I have given basic idea about CleanCSS Optimiser tool and how it does CSS optimization. CSS Shorthand is one of the important notations of CSS property which helps a lot to get optimized CSS.
So, I have collected some of important CSS shorthand properties here.

Margin and Padding

Margin and Padding both has same shorthand syntax.

.className{
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 3px;
  margin-left: 1px;
}

Instead of above we can simply combined into

.className{
  margin: 10px 5px 3px 1px;
}

Value of margin property is in Top, Right, Bottom and Left.
Here are some images for quick reference of shorthand notations,

Background

Refer following image for shorthand syntax,

Background Default Values
By default, the background property will assume the following when you do not declare each value of the properties,

Border

Refer following image for shorthand syntax,

Border has 3 px width by defaults, following CSS will create a ’3px’ solid blue border

 .className{border:solid blue;}

Border examples

1. Following CSS will create 5px solid ‘black’ border

p {
  border:5px solid;
}

2. Following CSS will create a ’3px’ dashed ‘black’ border

p {
  border:dashed;
}

3. Following CSS will create a 3px dotted red border

p {
  border:dotted;
  color:red;
}

4. Following CSS will create a 5px solid blue border

body {
  color:blue;
}
body p {
  border:5px solid;
}

Font

Refer following image for shorthand syntax,

Font Default values

Font examples

.className {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,”times new roman”,serif;
}

can be combined as,

.className {
  font:bold 1em/1.2em georgia,"times new roman",serif;
}