Shorthand properties

Some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property.

For example, the font-style, font-variant, font-weight, font-size, line-height and font-family properties can be combined into a single font property.

h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;

}

h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }

Shorthand properties for margin and padding allow 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. For example the first rule set below can be shortened:

p
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;

}

p { padding: 1em 2em 3em 4em; }

You can use one, two, three and four values within a shorthand declaration. For example, the rule below will apply padding to all sides of a box:

p { padding: 1em; }

The rule below will apply 1em of padding to the top and bottom, and 2em of padding to the left and right of the box.

p { padding: 1em 2em; }

The rule below will apply 1em of padding to the top, 2em of padding to the left and right, and 3em to the bottom of the box.

p { padding: 1em 2em 3em; }

The rule below will apply 1em of padding to the top, 2em of padding to the right, 3em of padding to the bottom and 4em of padding to the left of the box.

p { padding: 1em 2em 3em 4em; }

Browser support for shorthand rules varies. For detailed browser support charts, see the Stylemaster - CSS compatibilty Chart

CSS Comments »

Other Max Design articles and presentations
Associated with webstandardsgroup.org