As a child I was always amazed by people who could write in shorthand. Pages of what looked like mere squiggles to me, which were then transcribed perfectly into proper english- it was something I thought I’d like to learn when I grew up.

Fast forward some twenty years, of course- and now I wonder whether anyone uses traditional shorthand anymore. What I do use- almost on a daily basis, being a web designer- is CSS shorthand. Like traditional shorthand, CSS shorthand saves time. Which is why I want to post about it today.

For a long time, I didn’t use CSS shorthand. I thought it was confusing to learn, and that sticking to the old way of writing each line out was better. I was wrong, of course. For example, here’s the “old way” of defining an element’s background:

background-color: #fff;
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-position: top left;
background-attachment: scroll;


And here it is in CSS shorthand:

background: #fff url(images/bg.gif) repeat-y top left scroll;


See how much space that saves? Another place I love using CSS shorthand is when I define borders. Let’s say I want box with different border thicknesses. In the old days, I would have done something like this:

border-top: 1px solid #ccc;
border-right: 2px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 4px solid #ccc;


With shorthand, all I have to do is:

border:1px solid #ccc;
border-width:1px 2px 1px 4px;


Yes, you will have to learn the various properties you can use, and their default values. But if, like me, you spend a lot of time designing with CSS, it’ll be worth it. I promise.

For more depth into CSS shorthand, I highly recommend Dustin Diaz’s guide. Do you use CSS shorthand in your code?