CSS Tricks — A Quick Guide To CSS Shorthand Properties

The most exciting part of the designers and developers workflow is learning new things. With time and experience, they get to learn new tricks of the trade which help them in designing and developing with efficiency. Code optimization is one such thing which comes with exposure and experience. In today’s post we will come across one such trick — CSS Shorthand Properties.

CSS Shorthand properties is the efficient way of condensing and shortening your CSS code. Used wisely, they can make your style sheets smaller (so they will load a little faster) and easier to read. Here are 5 commonly used shorthand properties which can help you in optimizing your style-sheets:

1. Background Property
2. Font Property
3. Margin & Padding
4. Border Property
5. List Style

Background Property

Use of colors, patterns, textures and images in backgrounds is quite common. CSS provides various properties for achieving the desired background effects like changing the color, including the image in background or having a scrollable background. There is a set of 5 background properties which makes it easy to work with backgrounds.

//Individual background properties with default values element{ background-color: transparent; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: top left; } 

Along with the above mentioned properties, CSS makes provision for a shorthand property called background. The background property allows you to sum up the above code in one single declaration as follows:

  //Shorthand property: background element{ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]; } 

When using the shorthand property it is important to follow the order of the property values. Define the property values in the same sequence as mentioned in the above notation. If you leave out the value of any property, it will be replaced by the default values. Let’s take an example:

//Example: background property background: url('image.png'); 

The above code is equivalent to specifying the following values:

background-color: transparent; background-image: url('image.png'); background-repeat: repeat; background-attachment: scroll; background-position: top left; 

Even when you are not explicitly declaring the values for the properties, the properties get the default values. So, be careful when using the background shorthand property as the default values may break the design.

Font Property

Setting the font properties is the most common requirement in almost all cases. Specifying the font-size and font-family is the second nature of the web designer to ensure that the types compliments the design and boosts the readability of the web-page at the same time. In this respect W3C provides 6 font properties and specifies the default values for each.

 //Individual font properties with default values element{ font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; font-family: varies; } 

Along with the individual set of font-properties, W3C also provides a property named font which allows you to specify all font properties in one declaration. Here is the notation of font property:

 //Shorthand Property: font element{ font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]; } 

It is important to note that while using the font property, it is important to follow the order, i.e. specify font-style before font-variant and font-family in the end. There is one more CSS rule attached to font shorthand property which says: The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any.

Let’s take an example:

 //Example: font property font:italic bold 12px/30px arial,sans-serif; 

The above code will set the font properties as follows:

font-style: normal; font-variant: italic; font-weight: bold; font-size: 12px/30px; font-family: arial,sans-serif; 

Margin & Padding

CSS Margin properties allow you to set top, bottom, left and right margins individually. CSS also makes provision for a shorthand property called margin, which allows you to specify all the margin properties in one property.

The same trick applies to the padding properties as well. The padding properties set the padding for each side individually and  padding shorthand property enables you to declares the padding for all the sides in one statement.

Here is the declaration of margin properties followed by the notation of margin shorthand property.

 //Individual margin properties with default values
element{
margin-top: none;
margin-bottom: none;
margin-right: none;
margin-left: none;
}
//Shorthand property:
margin element{
margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
}

The margin (and padding) shorthand property can be used in one of the following four ways:

1. margin: 20px 40px 60px 80px; sets the margins in clock-wise sequence top margin 20px, right margin 40px, bottom margin 60px and left margin 80px.
2. margin: 25px 50px 75px; adds 25px margin to top, 75px margin to bottom and 50px margin to left and right.
3. margin: 25px 50px; adds 25px margin to top and bottom and 50px margin to left and right.
4. margin: 25px; sets 25px margins on all four sides.

Let’s have a look at an example to see how it works for padding. If you want to set the padding as follows:

 //Setting padding properties individually element{ padding-top: 10px; padding-right: 5px; padding-bottom: 10px padding-left: 5px; } 

simply, use the following code:

//Shorthand property: padding element{ padding: 10px 5px; } 

Border Property

CSS features a border shorthand property to include the border properties in one declaration. In the simplest form, border property is the combination of three properties: width, style and color.

 //Individual border properties with default values element{ border-width: none; border-style: none; border-color: none; } //Shorthand property: border element{ border: [border-width] [border-style] [border-color]; } //Example border-width: 5px; border-style: solid; border-color: blue; 

can be replaced by

border: 5px solid blue

The CSS rules for formatting the border however expands the utility of border shorthand property by allowing the developer to format the individual sides. Here are some examples of using border property for formatting individual sides.

• Declaring each side differently:

  border-top: 1px solid red; border-right: 2px dotted blue; border-bottom: 4px solid black; border-left: 8px dotted green; 

• Different border width on each side:

   border: 1px solid blue; border-width: 2px 4px 8px; 

• Different border color on different sides:

  border: 1px solid blue; border-color: red black; // sets top and bottom borders red and left and right borders black 

List Style

The shorthand property used for lists is the list style property which allows you to specify list-style-type, list-style-position and list-style-image (in this particular order) in one declaration.

//Individual properties for styling lists with default values element{ list-style-type: disc; list-style-position: outside; list-style-image: none; } //Shorthand property: list-style element{ list-style: [list-style-type] [list-style-position] [list-style-image]; }