CSS Shorthand: an Introduction

One of the things I see most often in beginners’ CSS is an utter lack of shorthand for style declarations. The cause may be that their existence is never mentioned in basic CSS tutorials, or that they’re never discussed in-depth enough for new developers to feel comfortable using them. Or, in some cases, simple ones are used without understanding exactly what is going on. I honestly don’t know why, but hopefully I can clear up some of their mystique so that these handy bits of code can be useful to all and sundry.

Attributes that can use shorthand

This is not an entirely comprehensive list of attributes that can be shortened, merely an overview of the most common. As more and more CSS2 and CSS3 properties are supported by modern browsers, the list of shorthand-capable attributes grows (border-radius and CSS columns come to mind). This should get you started, however. If you find yourself using a set of attributes that you think might have shorthand, I’m sure a quick Web search will pull up more information.

N.B. in most cases, if you leave out a value, the browser will use the default value for that attribute. I’ll let you know if that’s not true.

Hex RGB colors

This isn’t exactly a shorthand attribute, but did you know you can shorten hex colors if their RGB pairs match? So, instead of typing out #FFFFFF, you can shorten it to #FFF (or #fff—it’s case insensitive). It also works for something like #990000=#900, etc. Basically, anything formed as #xxyyzz. #499223 or something like it cannot be shortened.

margin/padding/border-width/outline-width

I’ve combined these all into a single heading because they work in the same way: each one takes between 1-4 size specifications and applies that measurement to the appropriate side. For declarations with multiple specifications, they order clockwise from the top So, how does it work?

  1. margin: 10px; (all)

    All sides are given the measurement.

  2. padding: 1em .5em; (top/bottom right/left)

    Measurements are assigned in top/bottom, right/left pairs. The top and bottom measure 1em while the right and left measure .5em.

  3. border-width: 1px 0 3px; (top right/left bottom)

    Three measurements are defined, with the right/left sharing. The top measures 1px, the right and left have no visible border and the bottom measures 3px.

  4. margin: 10px 5px 0 30px; (top right bottom left)

    Each side has a different measurement. The top measures 10px, the right measures 5px, the bottom has no margin and the left measures 30px.

That definitely saves time and bytes over:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 30px;

padding-top: 1em;
padding-right: .5em;
padding-bottom: 1em;
padding-left: .5em;

border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 3px;
border-left-width: 0;

N.B. This is one case where leaving off a value doesn’t go to a default; it changes the functionality.

border

The border property is one of the better-known shorthands. I often see border: none; used, which is a very comprehensive bit of shorthand. We discussed the shorthand way to declare border-width above, but we can go even further with shorthand:

border: #00f dotted 2px; (color style width)

In the above case, we end up with a dotted 2px blue border all the way around. But what if you want to have only a top and bottom border, like in the border-width example? You can combine the two:

border: #00f dotted;
border-width: 2px 0;

Remember that leaving off a value will generally result in the browser using the default. In this case, after the first declaration, the border-width is set to a default size, which the second line overrides by giving it an explicit width for the top and bottom.

The border properties have a sort of medium-level shorthand as well, which you see with border-width. You can further expand by declaring border-top-width, etc. border-color and border-style can be used in the same clock-wise manner as border-width, allowing you to provide 1-4 specifications. For instance:

border-color: red blue yellow;
border-style: dotted dashed solid double;

The above follows the same ordering principles as border-width: top right bottom left.

Without the various levels of shorthand, for even just a simple 1px solid red border you would have to declare the following:

border-top-color: red;
border-top-style: solid;
border-top-width: 1px;
border-right-color: red;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: red;
border-left-style: solid;
border-left-width: 1px;

N.B. Despite the fact that they begin with border-, border-spacing and border-collapse are not part of the border shorthand, as they pertain solely to tables, not other elements.

font

The font shorthand allows you to set some of the font-related properties of an object. In fact, one of the first lines of CSS on any site I develop looks something like:

font: 90%/1.5 Arial;

That is font shorthand at its most usefully condensed state (you could remove line-height—a font-size of 90% (percentage of the parent), a line-height of 1.5 (1.5x the font-size, so ~135%), and a font-family of Arial. Note the slash between font-size and line-height. It’s an important part of the syntax.

You can further enhance your shorthand by adding font-style, font-variant and/or font-weight to the beginning of your declaration. An extremely styled declaration might then look like:

font: italic small-caps bold 110%/2  "Adobe Garamond Pro", Garamond, "Apple Garamond",
                "Palatino Linotype", Palatino, Georgia, serif;

In addition to setting the font-family the font shorthand allows you to set the font using system settings—something that isn’t possible with font-family. The available system settings are:

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

I don’t have much experience using these settings, so your mileage may vary. If you have experience, tell us more about it in the comments, if you don’t mind.

N.B. using the font shorthand will reset any earlier or inherited declarations, rather than using the inherited property it will reset things to normal or the system font.

All other properties relating to text, such as color, must be set long-hand, but regardless, font is still faster than typing out:

font-family: Arial;
font-size: 90%;
line-height: 1.5;
font-style: italic;
font-variant: normal;
font-weight: bold;

background

There’s a lot more to setting a background than just color or image, but the background property makes it easy. Rather than typing out all of this:

background-color: #000;
background-image: url(/images/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;

We’re able to shorten it into a single statement that looks like:

background: #000 url(/images/background.png) top center no-repeat fixed;

Easy-peasy. Note that you don’t need quotes around your image url. (Unless you have a space in the image. Which you shouldn’t do online; remove the space instead of adding quotes.)

This shorthand goes even further in CSS3. With the new ability to have multiple backgrounds (very little support to-date), you can throw them all on a single background statement separated by commas like this:

background: url(/images/background-top.png) top center no-repeat, #000 url(/images/background-bottom.png) bottom center no-repeat;

The background shorthand is also further expanded to accommodate more new background attributes in CSS3, but because of the limited support I won’t cover them here now.

Shorthand declarations and cascading

Now that you have a grasp on which attributes can be shortened and how to do it, let’s get a little advanced here and talk about how using a mixture of shorthand and longhand declarations saves much time with cascading styles. See the following two style declarations. The first declares a generic box with a 10px margin on all sides and a 10px padding on the top/bottom paired with 15px padding on the right/left. To top it off, we have a reddish border of 2px all the way around. The second builds on that idea, but mixes things up a little; the designer decided that the left side should always have a margin of 20px; and a blue colored border.

div.box {
    margin: 10px;
    padding: 10px 15px;
    border: #900 solid 2px;
}
div.callout {
    margin-left: 20px;
    border-color: #009;
}

So, if we have a box constructed as such: <div class="box callout">, you will see the following:

Voilà, we have a box with 10px margin on all but the left side, with a solid 2px border that is blue instead of red. And the padding stays as was declared for div.box.

This is only one simple example of many possible uses. But imagine the time you save not only authoring the CSS but maintaining it. In this case, if you want to change the margin-bottom for all boxes, you only have to change the code in one spot, instead of for every single box. The more you code, the more you understand how simple things like that make your life much easier.

Did you find this useful? Have more questions about it? Comment and let me know what other CSS stuff you want to learn more about.

This entry was posted in Front-end Dev and tagged . Bookmark the permalink.
Like what you read? Share:
or Subscribe:

Similar Posts

2 Responses to CSS Shorthand: an Introduction

Subscribe to this post’s comments

  1. Adam Hobson

    30 Mar 2010 10:00 pm

    Regarding multiple class names, a co-worker of mine once referred to it as "class names with spaces" and hated people who do this. I think this was due to an old school javascript perspective where element.className returns the entire string of classes, not just one. So if you were checking whether an item had a certain class name you can't just check for className == "something" since it could have a class of "something" as well as "another-thing". I think that's why some of the old schoolers avoid the multiple class names.

    But lucky for us, we now have libraries like jQuery and Protype that make checking for a single class name as easy as calling hasClass() or hasClassName() and even sans-library it really isn't that hard to work with multiple class names if you remember they are possible when writing your code.

    • rae

      31 Mar 2010 10:01 pm

      We all have our coding quirks. I think your co-worker needs to reevaluate his hatred though. Even without libraries, you can work around it easily enough. The three minutes it would take you to write a function to break the string apart is nothing compared to the time you save developing your CSS and maintaining it over time. I've inherited some stylesheets where using multiple classes could cut the length in half, if not more; and make my life infinitely easier when I have to update the site.