Shorthand for box properties:
One form of shorthand notation allows us to specify values for two, three, or four sides of a box simultaneously.
Eg:
margin: 1em 2em 3em 4em;
// equivalent to:
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
Shorthand properties for properties like margin, border and padding, allowing sides to be grouped together.
If property values are different for all sides, shorthand can still be used.
The order of each value is important. Values are applied in the following order; top, right, bottom and left (clockwise, starting at the top).
Sometimes referred to as TRouBLE mnemonic (Top,Right,Bottom,Left).
This form of shorthand notation can take one, two, three, or four values. If four values are specified, they’re assigned to the appropriate sides in TRouBLe order.
If only two or three values are specified, the 'missing' side is assigned the same value as the one opposite it. If only a single value is specified, it’s applied to all four sides. Take a look at this declaration
Shorthand for Other Properties:
Another shorthand notation allows us to specify a number of related properties at the same time. ie: some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property.
Eg: font property can be combined from font-style, font-variant, font-weight, font-size, line-height and font-family properties
h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }
from
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}
Eg2:
background: #fff url(bg.png) no-repeat fixed right top;
background-color: #fff;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
Unlike the shorthand for box-related properties, when we’re combining related properties, the order of the values is generally not usually not relevant. However you should check syntax for each property just to be sure.
If a value is omitted, the initial value/default value will be assigned to the corresponding property.
This form of shorthand notation is used by the properties: border, border-top, border-right, border-bottom, border-left, outline, background, font, and list-style.
Note 1. Setting just part of the short hand property:
background: url(bg.png);
will apply defaults to the rest:
background-color: transparent; /* initial value */
background-image: url(bg.png);
background-repeat: repeat; /* initial value */
background-attachment: scroll; /* initial value */
background-position: 0% 0%; /* initial value */
Note 2: Setting the color first implicitly, followed by the shorthand background property:
background-color: #fff;
background: url(bg.png);
Here, the background color will not be white (#fff) as the background shorthand property's (initial value of transparent) will overwrite the implicit declaration (ie: background-color).
