Writing CSS Shorthand

Published April 7, 2008 by CSS Newbies.

"Jeri Rowe" by spcoon.

Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?

There are lots of things you can do to help – embracing the cascading nature of CSS helps a great deal, as does combining CSS declarations using sequential selectors. But another trick that can really help cut down on the size of your CSS is to use CSS shorthand properties whenever possible. There are six shorthand properties for various areas of your CSS: margins, padding, borders, backgrounds, list-styles, and fonts. I’ll go through each of them below.

The margin shorthand property combines the margin-top, margin-right, margin-bottom, and margin-left properties into one single property. So instead of writing this:

div {
	margin-top: 5px;
	margin-right: 8px;
	margin-bottom: 3px;
	margin-left: 4px; }

You could shorten it all down to this:

div { margin: 5px 8px 3px 4px; }

It’s important to remember to always put your margins in the shorthand property in the following order: top, right, bottom, and left. Basically, just start at the top and work your way around the element clockwise. And if your top/bottom and left/right margins match, you can boil your shorthand down even further:

div { margin: 5px 8px; }

The rule above applies a 5 pixel margin to the top and bottom of your div, and an 8 pixel margin to the left and right sides. If all four of your margins match, you could even just write this:

div { margin: 5px; }

The padding shorthand property works exactly the same way as the margin shorthand. The biggest thing to remember about both of these properties is to start at the top and work your way around clockwise. And if you’re shortening it to two values, the top/bottom value always goes first, followed by the left/right value. Further, if you don’t need to specify a value on any one of the sides, you can just specify a zero (0) size with no unit of measurement.

div { padding: 30px 0; }

The border property allows you to combine the border-width, border-style, and border-color properties into one. The width comes first, followed by the style, and then the color. So instead of writing out all this:

div {
	border-width: 3px;
	border-style: solid;
	border-color: #c00; }

You could boil it down to a single rule, like so:

div { border: 3px solid #c00; }

The background property is fairly powerful, in that it combines five rules into one: background-color, background-image, background-repeat, background-attachment, and background-position (in that order). So instead of writing this verbose mess of code:

div {
	background-color: #fff;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-position: top center; }

We could boil all of that down to this little snippet:

div { background: #fff url(../img/bg.gif) repeat-y fixed top; }

Also note that I skipped the “center” portion of my background-position property: if you specify one background position (i.e. “top”) but neglect to specify a second position value, “center” is the assumed value.

The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {
	list-style-type: square;
	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

The font shorthand property is probably the most powerful of all the shorthand properties. It combines a grand total of six properties into one: font-style, font-variant, font-weight, font-size, line-height (even though it’s not technically a font property), and font-family. So instead of writing out all six of these rules:

p {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: small;
	line-height: 1.2em;
	font-family: Helvetica, Arial, sans-serif; }

I can get by with a single declaration:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

Of course, most of the time you won’t be specifying all six of those properties at once – I can’t even imagine how difficult it would be to read italicized, bold-faced small caps! But it is very useful for specifying your font-size, line-height, and font-family all in one place. That way, all of your typeface information sits one convenient location.

18 Responses

  1. Rhaze (reply)

    One more

    div {margin : 5px 10px 2px}

    5px margin to the top, 10px margin to the left AND right sides, 2px margin to bottom ;)

  2. Pingback: Risparmiare banda utilizzando la sintassi abbreviata dei CSS : cssblog.it

  3. Shoghon (reply)

    FYI-You don’t even need the px in a lot of circumstances. i.e. p {margin: 0 1 2 3;} would, like the clock face, style top=0, right=1, bottom=2, left=3.

  4. Pingback: Блог для вебмастеров » CSS оптимизация: пишем правила сокращенно

  5. Pingback: 25 extremely useful CSS Shorthand Tutorials : Online Marketing Blog - Website Development & Website Marketing tips and Strategies

  6. Luke (reply)

    The one thing that really gets me with shorthand margins and paddings is that it goes anti-clockwise instead of clockwise. so instead of going top right bottom left. it goes top left bottom right. Always gets me!

  7. Blaise (reply)

    I always had problems remembering the order Top Right Bottom Left until I realised that it spelt TRouBLe !

  8. Pingback: Php Interview Question? | mycareerneeds

  9. Rain (reply)

    You look smokin’ hot, Miss Karen! I love the haircut! I love Utter Fun. I actually got a back-up, which I never do anymore. But it’s just the perfect noo-oot-cotl/not-too-warm pinky red. and it bightens up my face, which is something I am in desperate need of lately. It also looks really nice with a golden gloss over it. I really like it with Gold Rebel.

  10. credito en banco bbva (reply)

    Howdy, simply just evolved into concious of your blog site by Google, and discovered it’s seriously helpful. My business is planning to stay away from the city. I’ll appreciate should you persist this kind of in the future. Many will probably be benefited from an individual’s coming up with. Adios for now!

  11. h2o.ai (reply)

    Thanks for the comment. I agree with the repeating of your own tweets. Shouldn't happen. The only time I do this is around 3pm EST I often retweet my blog post link for the west coast people who were sleeping at 5am PST when the blog post was posted. I disagree with the amount of tweets people tweet. You can unfollow fellow tweeters whenever you want. If what people have to say is interesting it doesn't matter how many times they tweet. If you are tweeting about how you are making 5000 dollars a week to work at home that's a whole other problem.

  12. http://www./ (reply)

    Joy: Mashed potatoes are used here in place of eggs. Tuti fruit need not be cooked but this recipe involves cooking the dry fruits and making a syrup out of them. Yes you will still need to cover as this will stay in the oven in a long time. Sorry, I don’t bake with eggs!

  13. faz net autoversicherung deutschland (reply)

    Danke, dass du das sagst! ich merke schon, dass ich mir hier einfach viel zu viel Stress selber mache, du hast schon Recht… Ich MUSSja nicht posten- aber ich habe wohl Angst, die Routine zu verlieren. Oder so… doof von mir. Danke fürs nette Erinnern! Babyzeit ist wirklich wie ein Hauch im Wind, so blitzschenll vorbei…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>