Understanding CSS Shorthand

When declaring certain CSS properties, you have the option to use either the longhand, explicit declaration of a single CSS property, or a single-line shorthand declaration that combines a number of properties.

Let’s look at how shorthand works with some common examples, and I’ll try to explain some of the quirks associated with CSS shorthand.

A Shorthand Example

Declaring a background image is quite common in CSS. A background declaration in shorthand looks like this:

.element {
  background: #fff url(../images/bg-image.png) no-repeat fixed 20px 20px;
}

To understand what’s happening in this shorthand declaration, here is the exact same CSS using longhand:

.element {
  background-color: #fff;
  background-image: url(../images/bg-image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 20px 20px;
}

You can see already why most CSS developers prefer shorthand notation over longhand — the first example condenses five lines of CSS into one.

Simple Shorthand Declarations

Some shorthand declarations work in a very simple way. The example I showed you above with the background property is one of the more complex types (more on that below). But other shorthand declarations are quite easy to understand and work with.

The margin and padding properties are good examples of properties you’ll use often in their shorthand notation. And they’re not difficult to understand:

.element {
  padding: 20px;
}

In this example, although I’ve left out three other values, those values are assumed to be equal to the one value shown. So with this code, all four sides of the targeted element will have 20px of padding.

We can also do this:

.element {
  padding: 20px 10px;
}

In this example, we are declaring the top and right padding explicitly. The bottom and left padding, although not declared explicitly, will assume the same values as top and right — in that order. So the box will have 20px of top and bottom padding, and 10px of right and left padding.

And again, the long-hand equivalent of the example above would look like this:

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

Margins and CSS3’s border-radius property work exactly the same way, except with border-radius we’re dealing with corners instead of sides.

The More Complex Shorthand Declarations

Other shorthand declarations are a little more complicated, but with a few small exceptions, shouldn’t really cause you too many problems once you get the hang of them. The background shorthand declaration I showed you earlier is one example of these.

Other shorthand properties that may trip you up at times include:

• list-style
• font
• border
• outline

CSS3 features that use shorthand using the more complex style of notation include:

• animation
• border-image

So what is it that makes these other shorthand properties more difficult to understand? Well, because these properties accept different types of values (sometimes keywords, sometimes units, etc.), leaving out certain values in a shorthand declaration will often have unexpected results.

Here’s an example using background:

.element {
  background-color: blue;
  background: url(../images/bg-image.png) no-repeat;
}

With the code above, you would expect that the targeted element would have a non-repeating background image set over a blue background. But that will not happen unless we reverse the order of the properties. Because we’ve used background shorthand, this causes all the values associated with the background property to be reset to their initial, or default, state. In this case, the background color becomes “transparent”, overwriting the “blue”.

Avoid Getting Tripped Up

So it’s important to understand that anytime you use one of these more convoluted shorthand declarations, all omitted values associated with that shorthand declaration will be reset to their defaults.

Normally this is not a problem, because with properties associated with backgrounds, lists, padding, etc, those properties aren’t inheriting their values from parent elements. The only place where I have found this can cause headaches is in association with the font shorthand property.

That’s why I did this old screencast (which is a bit out of date now) and created this cheatsheet that discusses some of the problems you might run into when using the shorthand font property. Basically, we expect certain typographical properties to inherit from their parents. But when we use font in shorthand, all the properties associated with that declaration are reset to their initial state, thus losing that natural inheritance.

Another thing that can happen with font shorthand and some other shorthand declarations is that if you omit a mandatory value, the entire line will be ignored by the browser. This is another thing to keep in the back of your mind in case you’re scratching your head wondering why a certain CSS property isn’t having any effect.

Conclusion

Overall, I highly recommend using shorthand whenever you can. The only one that I avoid like the plague is font. I’m perfectly content to use longhand for those, and I think many feel the same way.

It does help to use longhand when you’re first starting out, to get to know each of the individual properties. But for the most part you’ll stick to shorthand once you’ve got a good handle on the syntax for the property you’re using.