What is a CSS Shorthand Property?

What are CSS Shorthand Properties Good For?

What is a CSS Shorthand Property?

A CSS shorthand property is a CSS style property that combines multiple properties into one. Instead of having four or more lines of CSS, you can use one line of CSS to define the same thing - which takes up less space and allows your documents to download more quickly.

What are CSS Shorthand Properties For?

CSS shorthand properties were created to save space. One of the biggest benefits you'll see with CSS is a huge lessening of lines of code to do the same thing.

For example, it used to be that to set the font family in the cells in a table, you had to use the font tag:

<font face="Times New Roman"> ... </font>

But that would only define the font for that one table cell, so every td would have to have that same line of HTML:

<td><font face="Times New Roman"> ... </font></td>

This quickly adds up to a lot of code. To get the same effect in CSS you just use one line of code:

td { font-family: "Times New Roman"; }

38 characters sets the style for the entire table that you used to have to do with 36 character per table cell.

But what if you want to set the font size, weight, style, line height, and family? IN standard CSS that would be five lines of CSS:

td {
  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-family: "Times New Roman";
}

While that's still better than using the font tag on each cell, it's still a lot of code. If you use the shorthand font property you'll streamline your CSS even more:

td { font: bold italic 1em/1.5em "Times New Roman"; }

Which CSS Properties are Shorthand Properties?

There are a lot of CSS shorthand properties.

• font
  font: font-style font-variant font-weight font-size/line-height font-family;
• margin
  margin: margin-top margin-right margin-bottom margin-left;
• padding
  padding: padding-top padding-right padding-bottom padding-left;
• border
  border: border-width border-style border-color;
  • border-top
    border-top: border-top-width border-top-style border-top-color;
  • border-right
    border-right: border-right-width border-right-style border-right-color;
  • border-bottom
    border-bottom: border-bottom-width border-bottom-style border-bottom-color;
  • border-left
    border-left: border-left-width border-left-style border-left-color;
  • border-width
    border-width: border-top-width border-right-width border-bottom-width border-left-width
• background
  background: background-color background-image background-repeat background-attachment background-position;
• list-style
  list-style: list-style-type list-style-position list-style-image;
• outline
  outline: outline-color outline-style outline-width;

CSS 3 will introduce more CSS shorthand style properties.