There are several CSS properties that can have their style tags written in "shorthand" which saves time and cleans up your code. The most common ones are listed here.
Background Shorthand
The background properties are:
- background-color: #hex
- background-image: url(URL)
- background-repeat: repeat | repeat-x | repeat-y | no-repeat
- background-position: (top | bottom | center) (left | right | center)
- background-attachment: scroll | fixed
These can be combined into one background shorthand as follows:
div {
background: #fff url(image.png) no-repeat top right fixed;
}
Default background property values if not specified:
- background-color: transparent
- background-image: none
- background-repeat: repeat
- background-position: top left
- background-attachment: scroll
Font Shorthand
The font properties are:
- font-style: normal | italic
- font-weight: normal | bold | bolder | | lighter | (100-900)
- font-size: (number+unit) | (xx-small - xx-large)
- line-height: normal | (number+unit)
- font-family:name,"more names"
These can be combined into one font shorthand as follows:
p {
font: bold 12px/18px georgia,"times new roman",serif;
}
Default font property values if not specified:
- font-style: normal
- font-weight: normal
- font-size: inherit
- line-height: normal
- font-family: inherit;
Border Shorthand
The border properties are:
- border-width: ?px
- border-style: dotted | dashed | solid | double | groove | ridge | inset | outset
- border-color: #hex
These can be combined into one border shorthand as follows:
p {
border: 4px solid #666;
}
Default border property values if not specified:
- border-width: 4px
- border-style: solid
- border-color: #000000
Outline Shorthand
The outline properties are:
- outline-width: ?px
- outline-style: dotted | dashed | solid | double
- outline-color: #hex
These can be combined into one background shorthand as follows:
p {
outline: 4px solid #666;
}
Default outline property values if not specified:
- outline-width: 4px
- outline-style: solid
- outline-color: #000000
Margin (and Padding) Shorthand
The margin (and padding) properties are:
- margin-top: ?px
- margin-right: ?px
- margin-bottom: ?px
- margin-left: ?px
These can be combined into one margin (or padding) shorthand as follows:
CSS:
div { margin: 10px; }
div { margin: 50px 20px; }
50px margin top & bottom +
20px margin left & right
div { margin: 10px 10px 50px 50px; }
(order: top right bottom left)
10px margin top +
10px margin right +
50px margin bottom +
50px margin left
div { margin: 20px auto; }
20px margin top & bottom +
browser determines left and
right (content will be
horizontally centered).
Hex Color Shorthand
This one's pretty simple. If the hexadecimal color you are specifying consists of three pairs of numbers, you can reduce that to three individual numbers and the browser will still display the correct color.
#000 = black, #fff = white, and so on.