CSS Shorthand Properties
CSS shorthand properties let you set several properties in one go. The compact form reduces files size, and once you get used to to them are fairly easy to read. WebCredible and 456 Berea St both have good explanations of the shorthand properties. Here is a brief summary.
| Property | Example | Definition |
|---|---|---|
| font | font: italic small-caps bold 1em/1.5em Arial; | style variant weight size/line-height family¹ |
| background | background:red url(img.gif) repeat fixed top left; | color image repeat attachment position ² |
| list-style | list-style: disc outside url(img.gif); | type position image ² |
| border | border: 1px black solid; | width style color ² |
| margin padding border-width | margin: 4px 3px 2px 1px; | top right bottom left (clockwise) |
| margin: 4px 2px 0px; | top right+left bottom | |
| margin: 4px 2px; | top+bottom right+left | |
| margin: 5px; | top+right+bottom+left | |
| ¹ size and family are mandatory, and must be in that order. The other properties are optional. ² properties are optional, and may be in any order. | ||
Since the border properties are optional, you can abbreviate the border-width property to border, for example, border: 5px;