There is no official documentation about CSS shorthands but they are there and some of you know them, some of you not. I tried to make a list of CSS shorthands, that may be of use by anyone.
background
A typical shorthand:
background: #FFFFFF url(image.jpg) no-repeat scroll top left;
Available background properties:
- background-color
- transparent
- hexadecimal from #000000 to #FFFFFF
- predefined colors like: blue, red, green, etc. (with letters)
- rgb(X,X,X) where X is a number from 0 to 255
- background-image
- none
- url(URI) where URI can be relative or absolute path to your image
- background-repeat
- no-repeat
- repeat-x
- repeat-y
- repeat (includes both: repeat-x and repeat-y)
- background-attachment
- scroll
- fixed
- background-position
- top left
- top right
- top center
- bottom left
- bottom right
- bottom center
- center left
- center right
- center center
- 0 0
Defaults to:
background: transparent none no-repeat scroll 0 0;
That means if you left out any of the properties, the others will have these values.
font
A typical shorthand:
font: normal normal bold 1em/1.2em georgia,"times new roman",serif;
Available font properties:
- font-style
- normal
- italic
- inherit
- oblique
- font-variant
- inherit
- normal
- small-caps
- font-weight
- normal
- bold
- bolder
- lighter
- inherit
- font-size
- xx-small
- x-small
- small
- medium
- large
- larger
- x-large
- xx-large
- number+unit
- line-height
- normal
- number+unit
- font-family
- (list of fonts)
margin and padding
The margin and the padding are the easiest and the rules go clockwise:
margin: (top) (right) (bottom) (left);
A typical shorthands (examples):
This adds 10px margin on all sides of the element:
margin: 10px 10px 10px 10px;
This also, adds 10px margin on all sides of the element
margin: 10px;
This adds 10px margin to top and bottom and a 20px margin to left and right:
margin: 10px 20px;
Also any combination of number and measurement unit is possible.
The same rules apply for padding as well.
border
A typical shorthand:
border: 1px solid blue;
Available border properties:
- border-width: number+unit;
- border-style:
- solid;
- dotted;
- dashed;
- hidden
- none
- double
- groove etc.
- border-color:
- none
- hexadecimal from #000000 to #FFFFFF
- predefined colors like: blue, red, green, etc. (with letters)
- rgb(X,X,X) where X is a number from 0 to 255
list-style
A typical shorthand:
list-style: disc outside url(image.gif);
Available list-style properties:
- list-style-type
- disc
- square
- circle
- decimal
- georgian
- etc
- list-style-position
- inside
- outside
- list-style-image:
- none
- url
Defaults to:
list-style: disc outside none;
There are other shorthand out there, but are less used. Any comments are welcome.