There have been a number of occasions when looking over other developer’s CSS I notice bits of code similar to the following…

#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
/* (auto, 0, px, pt, em or % ) */
}
#div {
margin:0 5px 10px 15px;
/* (top right bottom left) */
}

and

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}
#div {
margin:10px 20px 0;
/* (top right/left bottom) */
}

and

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#div {
margin:0 auto;
/* (top/bottom left/right) */
}

and

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
#div {
margin:50px;
/* (top/right/bottom/left) */
}

Border

#div {
border-width: 5px;
/* (thin, thick, medium or set value) (default = medium) */
border-style: dotted;
/* (solid, dashed, dotted, double, etc) (default = none) */
border-color: blue;
/* (named, hex, rgb or 0-255) (default = value of elements/elements parent color property) */
}
#div {
border:5px dotted blue;
}

and

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}
#div {
border-right:2px solid #666;
}

and

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}
#div {
border-width:3px 2px;
}

Background

#div {
background-color: #CCCCCC;
/* (named, hex, rgb or 0-255) (default = transparent) */
background-image: url(images/bg.gif);
/* (url or none) (default = none) */
background-repeat: no-repeat;
/* (repeat, repeat-x, repeat-y  or no-repeat) (default = repeat) */
background-attachment: scroll;
/* (fixed or scroll) (default = scroll) */
background-position: top left;
/* (top, right, left, bottom or center) (default = 0% 0%) */
}
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
/* (Verdana, Arial, "Times New Roman", etc) (default = varies by browser) */
font-size: 12px;
/* (xx-small, medium, x-large, set value, etc) (default = medium) */
font-weight: bold;
/* (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal) */
font-style: italic;
/* (normal, italic or oblique) (default = normal) */
font-variant: normal;
/* (normal or small-caps) (default = normal) */
line-height: 1.5;
/* (normal, px, pt, em, num or %) (default = normal) */
}
#div {
font:italic bold  12px/1.5 Verdana, Arial, Helvetica;
}

List

#div {
list-style-image: url(images/bullet.gif);
/* (url or none) (default = none) */
list-style-position: inside;
/* (inside or outside) (default = outside) */
list-style-type: square;
/* (circle, disc, square, etc) (default = disc) */
}
#div {
list-style:square inside url(images/bullet.gif);
}

Colors

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff

Click here to download a PDF cheat sheet.

Posted by Michael in CSS on April 18, 2008

22 Responses

Nice article. I didn’t know about the font-size/line-height shorthand. Thanks!

Alex on April 19, 2008 at 3:21 am

Setting the font definition with just `font` can be tricky when setting it for all elements using * selector.

If you use for example:

* { font: 11px Verdana, Arial, sans-serif }

Keep in mind that all the default styles for all elements had ben overwriten, so or is no longer bolded, same goes for etc.

BTM on April 19, 2008 at 11:17 am

Ooops, looks like you have HTML enabled comments, so let me correct that one:

Keep in mind that all the default styles for all elements had ben overwriten, so <b> or <strong> is no longer bolded, same goes for <i>, <u>, <em> etc.

BTM on April 19, 2008 at 11:18 am

Thanks Alex. Definitely BTM, global definitions need to be used very carefully. I prefer to add a global font tag to the body element. With the exception of the textarea tag and maybe a couple more everything else should inherit the styling. HTML comments should be disabled now, glad you caught that.

Michael on April 19, 2008 at 11:57 am

I was looking for a good guide for CSS shorthand for quite some time. That’s really really useful! Now I just gotta memorize it :D
Thank you!

Rafael Masoni on April 20, 2008 at 4:51 am

I like grouping the properties all on one line, makes for faster, easier reading (once you get used to it).

Anthony Ettinger on April 20, 2008 at 6:52 am

The shorthand notation is definitely useful, but I often avoid it simply because I can’t remember what order the elements must go in, or I’m not sure how it’ll interpret missing parts.

This threw me in your example, for instance:
margin:10px 20px 0;
(top right/left bottom)

Ouch. Random! It could just as easily be (top/bottom right left)… I guess you just have to memorize how it will interpret only three values provided. Personally I’d never use that one… it’s just too cruel to a maintenance programmer who has to figure out if it’s a typo, or if not, how the devil it’s actually working.

The font shorthand declarations also get a bit scary… there’s more than one property in there that can be a number, so you really have to know how the parsing is going to happen (and whoever’s maintaining your code had better know as well).

Rob Whelan on April 21, 2008 at 7:14 am

@Rob Whelan – Thanks for the comment. I agree that maintainability could be an issue in a group of developers where everyone is not familiar with shorthand. I also concede that some of the shorthand tags are easier than others, the font tag is by far the most complex. Also, the easy way to remember margins, padding and border is simply to start with the top value and work your way clockwise, if margin:10px 20px 0 confuses you then be a little more verbose and use 10px 20px 0 20px, still much simpler than typing out each property individually. Also, on the majority of these, order is irrelevant although the spec does often define an order. I would recommend using the orders that I use above. I do feel that it is worthwhile to learn and apply these tags, once you get a hang of it you will be glad you did. I will try and put a PDF cheat sheet together today for download, hopefully that will help.

Michael on April 21, 2008 at 8:15 am

@BTM
It’s cascade stylesheet, so no wonder than setting normal to * will affect all tags…

Piotr on April 30, 2008 at 6:55 am

From a single by-id-styling to a very long code. I think it’s an accurate way to stylize a website. But is there another alternative than this? It’s obviously too long to memorize and understand. This code helped me, but am looking forward for a shorter code with the same result. Thank you very much for this tutorial.

Free book of Success on February 13, 2009 at 10:24 pm

Read all your posts….You are truly amazing….keep rocking…
I am now your fan !

Vignesh on September 21, 2009 at 7:38 pm

hmmm…nice…will start using font and background shorthands from now on…thanks alot.

George Kharmujai on September 25, 2009 at 3:16 am

Thank you for the good lesson.

Webchester on December 18, 2009 at 3:01 pm

Great tips for better coding practice, nice share

Craig on August 26, 2010 at 6:53 am
Comments are closed at this time.