Tutorial: Using CSS Shorthand in your Stylesheets

Using CSS Shorthand is great for reducing the lines of code and preventing us typing lots of duplicate lines of code in our stylesheet’s, but how many of us use it? I notice on a lot of developers stylesheets that they have multiple lines of code where only one is needed and I don’t really understand why! I guess it’s a personal preference, but here is how you can start coding CSS in shorthand.

Margin and Padding

You may currently be setting your margin/padding like this:

[css]
.class-name {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
[/css]

Shorthand allows you to shrink these four lines down to just one. Think of the margin as four values in clockwise order Top, Right, Bottom, Left. In the above code we have assigned a margin of 10px to each individual side of the element, but what you can do is change the four lines to just one line using the margin property and assign it four values in the clockwise order I mentioned just before (top, right, bottom, left) leaving us with this:

[css]
.class-name {
margin: 10px 10px 10px 10px;
}
[/css]

Taking this further we can again shrink this down even more depending on the margin values. We can group specific items together, such as Top / Bottom and Right / Left. Below are some examples of how you can shorthand margins in your css:

Example 1

• Top: 10px
• Right: 15px
• Bottom: 20px
• Left: 15px

This would be displayed using just three values because the left and right values are the same, so we just define top, right+left and bottom values, shown below:

[css]
.class-name {
margin: 10px 15px 20px;
}
[/css]

Example 2

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 15px

This can be displayed using just two values because both the top+bottom and right+left values are the same, shown below:

[css]
.class-name {
margin: 10px 15px;
}
[/css]

Example 3

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 20px

When in a situation where the top+bottom values are the same but the right+left values are different, we still have to display all four values as you cannot group the top and bottom values together because the left value would be read as if it was the bottom value. We can still use shorthand to display the css on one line, shown below:

[css]
.class-name {
margin: 10px 15px 10px 20px;
}
[/css]

Right that’s margin’s covered and for padding it is exactly the same method. All you have to remember is which order the four values go in then its pretty much common sense from there.

Backgrounds

Background’s are again a popular property that you are likely to assign at least once on each of your stylesheets, sometimes multiple times in which case this will come in handy. When assigning a background you may set an element any number of the following properties:

[css]
.class-name {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
[/css]

Again using shorthand we can combine all of these values into one using the background property. The order I usually put them in is as follows:

• color
• url (if required)
• position
• repeat / no-repeat / repeat-x / repeat-y

This means our code will now look like this:

[css]
.class-name {
background: #fff url(image.jpg) top left no-repeat;
}
[/css]

If you miss out a value then it will be rendered with the default, so if you don’t assign a background position then it will default to top left.

Fonts

Next up is fonts! Now I’ll have to admit that this is one I tend to just set line by line out of habit, but again there is a cool shorthand method to save you writing lines and lines of the same code.

Here are the more commonly declared font properties:

[css]
.class-name {
font-size: 1em;
line-height: 1.2em;
font-weight: bold;
font-style: normal;
font-family: Arial;
}
[/css]

We can take the five lines above and again make them into just one using shorthand. The main thing to note when shorthanding font properties is that you must declare both the font-size and the font-family or the whole thing will be ignored. Lets start by shortening just them two properties:

[css]
.class-name {
font: 1em Arial;
line-height: 1.2em;
font-weight: bold;
font-style: normal;
}
[/css]

Within the font property we can also include line-height, font-weight and font-style. If you don’t declare these values then like the background property, the values will be set to the default values of normal.

Here is what the whole thing would look like going with the values above:

[css]
.class-name {
font: 1em/1.2em bold normal Arial;
}
[/css]

As you can see, using shorthand will save you having to write four extra lines of code and if you have a pretty major stylesheet this could cut it down dramtically!

List Styles

Lists are another property that can be shrunk down using shorthand. Typical List properties would include:

[css]
.class-name {
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.jpg)
}
[/css]

These three lines can be made into one simple line by defining the type, position and image source under the property list-style. Please note, if any of the values are not defined then they will display as the default. Here is what the shorthand will look like:

[css]
.class-name {
list-style: disc outside url(image.jpg);
}
[/css]

Fairly straight forward and thats about it for List Styles.

Borders

Border’s can be defined in several ways, if you are currently defining a width, color and style on seperate lines in your stylesheet (which is unlikely) then you can quickly edit this into one nice clean line of code, taking this:

[css]
.class-name {
border-width: 5px;
border-color: #000;
border-style: solid;
}
[/css]

and ending up with this instead:

[css]
.class-name {
border: 5px solid #000;
}
[/css]

If you want to define several sides of the element with different values then you can do so like this:

[css]
.class-name {
border-top: 5px solid #000;
border-right: 10px solid #000;
border-bottom: 5px solid #000;
border-left: 10px solid #000;
}
[/css]

The example above contains four lines, which could have been twelve had you defined seperate style, width and color values. You can (if you want to) get the same effect as the above example by using the following:

[css]
.class-name {
border: 1px solid #000;
border-width: 5px 10px 5px 10px;
border-color: #000;
}
[/css]

Although this will achieve the same effect, personally I prefer the first method as I find it easier and quicker to type as it requires less thinking lol.

Conclusion

Whether you use it or not, you must agree using CSS Shorthand does make sense when thinking you can cut down the number of lines you have to code, as well as making your CSS Stylesheet smaller in size (maybe a little but still!) then it’s the obvious choice. Let me know what you think and which one’s you use or if I have missed anything!