CSS Tutorials: Shorthand CSS Guide PDF

Every web designer should have a collection of guides (well, I think they should anyway) for those days when your mind goes blank and you cannot for the life of you remember how to give something a border (hey, it’s happened) in a web design you’re coding up.

Well, today I’ve got a little present for you. A downloadable pdf that has the most common css elements and their shorthands for you. It’s got cute little animals as well, so you can stick it on your wall, or on your desk, and have something nice to look at, at the same time!

For those of you that don’t like downloading, or are perhaps unable to do so at this time, here’s a summary:

background: color image-url repeat position attachment
list-style: type position image
font: style variant weight size/line-height font-family
outline: width style color
margin: top right bottom left
padding:  top right bottom left

With regards to the margin and padding elements, the motion of top right bottom left can apply to all box-style elements, for example borders. You can also shorten them further if you only need to apply one size to all, so

padding: 10px;
margin: 5px

would apply 10px padding and 5px margin to all sides of an element. If you wanted to have different amounts for your vertical and horizontal, you could shorten it like so:

padding: 10px 0;
margin: 5px 15px

This would apply 10px of padding and 5px margin to the top and bottom and 0 padding, with a 15px margin to the left and right.

Thanks for reading our web design blog this week, don’t forget to check back on Friday for James’ video blog!