One of the countless great possibilities in CSS is the use of shorthand properties, which allow you specify several properties by using only one. If you have begun to learn about CSS and implement it on your Web pages, you’ll straightway see the benefit of using these shorthand properties. CSS shorthand makes it even easier for you to apply style to your markup and makes your CSS code more short and snappy.

A CSS rule will often contain many property declarations. CSS shorthand eases the task of declaring several properties with a single shorthand property. Let’s look at an example to get a better idea. To add CSS style to the body tag in HTML, you can write this:

Body

{
background: url(”bjs.gif”);
background-color: #fff;
background-repeat: repeat-x;
}

The above code is a common way to apply CSS. It is used by coders all over the world. Now let’s see what happens if we try to define the same style, this time using a shortcut. We’ll use the ‘background’ property, which allows us to set values for all the above properties more powerfully. In fact, it reduces the code to half of its lines.

Body

{
background: url(”bjs.gif”) #fff repeat-x;
}

As you can see, there’s a lot of scope to make your CSS more efficient if you know how to put the shorthand properties to operation. Let’s take a look now at some of the shorthand properties that are used more often and which you can implement easily on your website.

The font shorthand property

Syntax

font: font-style | font-variant | font-weight |
font-size | line-height | font-family

Example:

P
{
font: x-large/110% “new css website”, serif;
}

In this example, you’ll notice that we haven’t defined font-variant and font-weight; they’ll therefore use their existing values. The value x-large/110% refers to font-size and line-height. As both use size as value, they can be grouped together like this, with a slash, font-size always being the first value defined. Quotes are used around the font-family value because of the spaces included in the name of that value.

The margin and padding shorthand properties

Syntax

margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Example:

p
{
margin: 2em;
}

In this first example, all margins are set to 2em. When only one value is defined, it applies to all sides of the page (horizontal and vertical margins).

p
{
margin: 1em 2em;
}

In this example there are two values defined. CSS interprets the first as being the value for the horizontal margins, those at the top and bottom of the page, while the second value defines the right and left margins’ sizes.

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

In this last example, 3 values are defined. Margin-top is set by the first value, margin-left and margin-right are set by the second and margin-bottom is set by the third. When 4 values are defined, the top is defined first and then the other values are automatically applied to the borders moving around the page in a clockwise direction i.e. top, right, bottom and left.

The background shorthand property

Syntax
background: background-color | background-image |
background-repeat | background-attachment | background-position

Example:

P
{
background: url(”bjs.gif”) gray 50% repeat fixed;
}

As you can see, the background-image is set to bjs.gif, and the background-color is gray. The background will repeat, but stays fixed. Only one position is given, so the value 50% will apply horizontally.

CSS shorthand properties are quicker and more efficient to use than standard CSS in many situations. The support for these CSS properties can vary across browsers. So be sure to check what technology your target audience uses before implementing CSS shorthand on your site.

Tags: CSS Shorthand – All in One