Using shorthand CSS can save some 1’s and 0’s in your stylesheets which add up if you have a busy web site. Just think, all those extra lines of codes taking up valuable bytes are adding up on that server. It may seem minimal at first but it does take up some space once you have enough sites on your server. Even if you don’t care that much about bandwidth or server stress- you are wasting valuable keystrokes by typing extra attributes and properties in your CSS.

Shorthand CSS is a productivity tool

It is a good habit to be in if you are using shorthand CSS, you can save a lot of time by combining attributes like font, border and background. I know those are the three I spend the most amount of time with. Especially with the background property. When you are not using shorthand CSS you are having to type out background-image, background-color, background-repeat, background-position, and so much more. Shorthand CSS will clean up your markup tremendously.

Using shorthand CSS on the background property

This is how your normal background element looks when you aren’t using shorthand, you will see how much of a difference using shorthand CSS will make on your stylesheet complexity.


.class {
background-color: #ffffff;
background-image: url(mycss.jpg);
background-position: center top;
background-repeat: no-repeat;
}


As you can see your CSS can get quite lengthy when you display every element out like this. Now lets take a look at this exact same CSS statement using the shorthand method.


.class {background: #fff url(mycss.jpg) no-repeat center top;}


See how much of a difference it can make? It is easy to switch over to the shorthand CSS methods. Especially when you are using the background property, the reason for this is that it doesn’t require you to put the attributes in any order so you can mix and match without having to worry what place which CSS attribute goes.

Using shorthand CSS on the font property

When using the font property in shorthand things can get a little confusing so you want to be sure you pay close attention to this section. You must put all of your attributes in order if you want to use font in the shorthand CSS method. The reason for this is that various browsers assign different defaults to different elements and because of this you can easily specify something like the font size and color and accidentally erase the bold on a strong tag or something equally as traumatic. Maybe not traumatic, but it could turn out a bit frustrating. Like that time you broke your mouse, accidentally.

Here is an example of using the font property the lengthy way.

.class {
font-variant: normal;
font-style: uppercase;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}


Now as you can see it can all get very lengthy to use the font element the regular way, it is safe to say however that most of the time you really aren’t going to be declaring all of these things on every element but it could easily come up. I know that I usually use line-height, font-family and font-size on pretty much everything so there are times when I actually don’t use shorthand for the font tag because of the confusion it can present in simple matters.

Here is an example using the font property the lengthy way, notice that the order in which it goes is font-style, font-variant, font-weight, font-size, line-height and then finally font-family.


.class {normal uppercase bold 12px/1.2em Arial, Helvetica, sans-serif;}


I don’t generally use the font property in shorthand to be quite honest, but if you find yourself writing too much when it comes to fonts this information can come in handy. Especially knowing the order to list when using the font property in shorthand CSS.

Using padding and margin in shorthand CSS

These two are really simple for the most part, most of the time you are going to be declaring a mix between the all 4 or just top/bottom and left/right. It saves a ton of time to not type out padding-right, padding-left, padding-top, padding-bottom and so on. Same goes for using margin, it is an unnecessary bunch of stuff that will make your whole stylesheet look like garbage.

The most basic rule for using padding and margin is to know that it goes clockwise around your browser starting at the top. So, for example the following will illustrate the difference between longhand and using padding and margin for shorthand.


.class {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


Next I will display a couple of ways to do this exact same thing using shorthand CSS. The first example is the most applicable for this specific example.


.class {padding: 20px 10px 5px 10px;}


Then you could also do the following and it would work just the same but would best be left for other instances or preference.


.class {padding: 20px 10px 5px;}


You can easily group duplicate sizes in margin and padding. They both work identical except for their application. Just for clarification, padding is inside of the box and margin is outside of the box.

Using borders in shorthand CSS

The border for shorthand is a little different then the rest but can still be used much easier then the font property can. There are somethings that I wish the border property would do that it doesn’t but it is still efficient for what it is.
You can easily assign border for all sides or be more specific with border-top, border-left, border-right and border-bottom. It just depends on what you are doing for when you would use them.

This is an example of using the border property the long way, which takes quite a bit more work for less results.


.class {
border-color: #000;
border-width: 1px;
border-style: solid;
}


The following example is simply using the border for all sides of your box, you must specific a pixel size, a border type and a border color for this to work properly. With the border in CSS shorthand you can use them in any order. So it is very easy to implement once you have built the habbit.


.class {border: 1px solid #000;}


You can also only assign it to a specific side if you would like, as I had mentioned above.


.class {border-bottom: 1px solid #000;}


Using list-style in CSS shorthand

This method of using shorthand CSS isn’t quite as popular as some of the others but I do tend to use it sparingly. I often forget it because it isn’t often that I want to use all of the properties available, but it can be handy.

Using the longer version of CSS for this style.

ul li {
list-style: none;
list-style-position: inside;
list-style-image: url(myimage.jpg);
}
Now to simplify this CSS example, we would do the following.

ul li {list-style: none inside url(myimage.jpg);}

Thats it for list-style, it is pretty basic and only comes in handy when you are doing navigation. I often forget about it but after writing all of this I’m sure I will remember to use it more often in my stylesheets.

The end to my guide to CSS shorthand for your stylesheets!

When I started writing this I think I forgot how much you can really use shorthand, I write my articles in OpenOffice before I publish them and it is currently telling me that I am on page 5, nearly at the end of it. Before anyone goes crazy about the fact that you can use outline in shorthand, I know you can and I didn’t include it because it isn’t really supported much and it has even less functional use in web design. If it has a renewal worth my time I may add it but you pretty much use it identically to the way you use the border for shorthand CSS.

I know I have missed a few CSS Monday’s but I’m sure that this one (even though it is late) is well worth the missed ones. This has a ton of information that I’m sure would be helpful to seasoned designers and beginners alike. So definitely take your time to delicious bookmark this page and subscribe to my RSS feed if you would like to continue reading more web design news articles like this one.

Related Posts