CSS shorthand Syntax


We have five background properties: background-color,background-image,background-repeat,background-attachment,background-position.The order is that we just showed.

Margin and Paddings

The order is that first is margin-top, then margin-right, margin-bottom and margin-left.
If you only input one value, it will apply to every property.
If you want set two value,it's the margin-top and margin-right.meaning the top and bottom margins will have one value and the left and right will have another. By default, when you declare the shorthand top margin, the bottom will match and when you declare the shorthand right margin the left will match.
If you set three value.So it will set the top, right and bottom margin manually while the left is automatically grabbed from the right.


We have three property of the border: border-width,border-style,border-color

it’s best to keep it in this standard order to ensure complete compatibility.

you can target one of the three border properties and apply them in a clockwise fashion just like wed did with the margin shorthand.

border-top: 2px solid red;  
border-right: 4px solid red;  
border-bottom: 8px solid red;  
border-left: 16px solid red;  


We have six properties:font-style,font-variant,font-weight,font-size,line-height,font-family.
You can ditch the font style, variant and weight and just declare a quick font size, line-height and font-family.

font: font-size/line-height font-family;

CSS3 Transitions

We have four properties.
transition-property,transition-duration,transition-timing-function,transition-delay The order is that we just showed.