CSS: Shorthand Properties

The whole idea of CSS is to reduce the download time of your site, thus knowing shorthand properties is a must. Rather than specifying several declarations, they can all be put into one.

Colors

When a color consists of three pairs of hexadecimal digits, it can be shortened down into three digits. #ff0000 becomes #f00, #fb0fb0 becomes #f0b and so on.

Margin and Padding

The W3C specification of the input order is as follows for both margin and padding properties: top, right, bottom, left.

If you set one value it will apply to all sides. If you set two values, the top and bottom margins will be set to the first value, and the right and left paddings will be set to the second. If you set three values, the top will be set to the first value, the right and the left to the second, and the bottom will be set to the third. If you put four values, they will apply to each side respectively.

In order words, writing
margin: 10px; is the same as margin: 10px 10px 10px 10px;
margin: 5px 2px; is the same as margin: 5px 2px 5px 2px;
margin: 1px 4px 6px is the same as margin: 1px 4px 6px 4px;
margin: 0 10px 3px 5px is the same as margin: 0 10px 3px 5px;

Moving onto the shorthand, the complete code for setting 10px padding to the top, none to the right, 5px to the bottom and 3px to the left would be as follows:

  • margin-top: 10px;
  • margin-right: 0;
  • margin-bottom: 5px;
  • margin-left: 3px;

All of this can easily be condensed into this shorthand property:

  • margin: 10px 0 5px 3px;

Fonts

The W3C specification of the input order is as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.

If you don't specify all values, it will use the intial values:
font-style: normal
font-variant: normal
font-weight: normal
font-size: medium
line-height: normal
font-family: depends on the user agent

The complete code for font customization:

  • font-style: italic;
  • font-variant: small-caps;
  • font-weight: bold;
  • font-size: 12px;
  • line-height: 2px;
  • font-family: verdana, sans-serif;

Can easily be condensed to:

  • font: italic small-caps bold 12px/2px verdana, sans-serif;

Background

The W3C specification of the input order is as follows: color, background-image, background-repeat, background-attachment, background-position.

If you don't specify all values, it will use the intial values:
background-color: transparent
background-image: none
background-repeat: repeat
background-attachment: scroll
background-position: 0% 0%

The complete code for setting the background color, adding a fixed repeating background and setting the position is as follows:

  • background-color: #fff;
  • background-image: url(background.jpg);
  • background-repeat: repeat;
  • background-attachment: fixed;
  • background-position: 0 0;

All of this can easily be condensed into this shorthand property:

  • background: #fff url(background.gif) repeat fixed 0 0;

Borders

The W3C specification of the input order is as follows: width, style, color.

If you don't specify all values, it will use the intial values:
border-width: medium
border-style: none
border-color: color

The complete code for a 1px solid black border:

  • border-width: 1px;
  • border-style: solid;
  • border-color: #000;

Can be put as:

  • border: 1px solid #000;

If you would like to specify specific values of each side, this code:

  • border-right-width: 1px;
  • border-right-style: solid;
  • border-right-color: #000;

Can be put as:

  • border-right: 1px solid #000;

Lists

The W3C specification of the input order is as follows: list-style-type: square, list-style-position: inside, list-style-image: url(image.jpg).

If you don't specify all values, it will use the intial values:
list-style-type: disc
list-style-position: outside
list-style-image: none

The complete code for list customization:

  • list-style-type: square;
  • list-style-position: inside;
  • list-style-image: url(image.jpg);

Can be condensed to:

  • list-style: square inside url(image.jpg);
eXTReMe Tracker