Shorthand properties
Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, improve page load times and reduce file size.
The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. That means it accomplished by listing the property values on a single line, in a specific order. E. g. the CSS background
property is a shorthand property that's able to define the value of background-color
, background-image
, background-repeat
, and background-position
. Similarly, the most common font-related properties can be defined using the shorthand font
, and the different margins around a box can be defined using the margin
shorthand.
Example
A background with the following properties:
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
Can be shortened to just one declaration:
background: #000 url(images/bg.gif) no-repeat top right;