CSS Tips

CSS Shorthand Properties

CSS shorthand properties let you to group related properties into one abbreviated format. There are six shorthand properties in CSS:

  1. font
  2. padding
  3. margin
  4. border
  5. background
  6. list

CSS shorthand is supported by most modern browsers. You can combine shorthand properties with grouping to save even more.

Font Shorthand Properties

The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: .9em;
line-height: 1.2em;
font-family: Verdana, Arial, sans-serif;
}

Into this:

p {font: italic small-caps bold .9em/1.2 Verdana, Arial, sans-serif;

For more information visit:

Padding and Margin Shorthand Properties

Instead of specifying up to four longhand padding or margin values, you can use the padding and margin shorthand properties. So instead of this:

p {
padding-top:3em;
padding-right:1.5em;
padding-bottom:2em;
padding-left:1.3em;
}

You can do this:

p {padding:3em 1.5em 2em 1.3;}

Note that these values are always applied in a clockwise fashion: first top, then right, then bottom, and then left. Hint (think of a clock: 12, 3, 6, 9). Another way to think of it is, if you get the order of the CSS shorthand wrong you will be in *TRouBLe* that is Top, Right, Bottom, Left. Clockwise from the top - padding: top right bottom left. The margin and border shorthand properties uses the same syntax.

Also you can use shorthand for top/bottom, left/right values that are the same. So instead of this:

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

You can do this:

p {padding:1em 2em;}

Note that these values replicate according to the CSS specification when values are ommitted. For the example above the top and right values replicate to the bottom and left padding respectively. It may help to remember it with "TB RL"...the shorthand used when the top and bottom padding are identical to each other, and the left and right padding are identical to each other.The margin and border shorthand properties uses the same syntax.

For more information visit:

Border Shorthand Properties

The border properties have eight shorthand properties (border-style/width/color, border-top/right/bottom/left and border). The most powerful is the border shorthand property which you can use when all sides of your element have the same values. So instead of this:

div {
border-top: thin solid n;
border-right: thin solid n;
border-bottom: thin solid green;
border-left: thin solid green;
}

You can do this to create a thin green line:

div{ border:thin solid green;}

For more information visit:

Background Shorthand Properties

The background property for sets all background properties (background-color, background-image background-repeat, background-attachment, background-position) in one declaration.

For more information visit:

List Shorthand Properties

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

li { list-style: square inside url(/images/bullet.gif); }

For more information visit:

<< previous | next >>