6 CSS Shorthand Tricks Every Developer Should Know

by on 21st April 2011 with 23 Comments

Recently, I decided that I needed a refresher in all of the various CSS shorthand properties. The best way to learn something is to teach it so here’s my attempt at exactly that.

Today we’ll learn how to use CSS shorthand for backgrounds, margins & padding, borders, fonts, list-styles and transitions.

Background

CSS background images are one of the most common places that I see CSS shorthand being implemented. There might be a little more functionality here though than people take advantage of. Let’s start with a typical example of the normal way to declare a background.

Background: The Long Way

background-color: #eee; background-image: url(background.jpg); background-repeat: no-repeat;

Background Shorthand

From here, most of us know how to take these three properties and throw them all inside the background property. Check out how much room this saves.

background: #eee url(background.jpg) no-repeat;

Attachment and Position

Two other properties that you don’t see in the shorthand as often are position and attachment. Just as a refresher, let’s look at what these two are.

Background-attachment refers to whether or not the background image will scroll with the page or not. The default value is scroll, which means that you will lose sight of the image as you scroll down the page just as you do with the rest of the content. If you change this to fixed, the background will stay right where it is as the rest of the content scrolls over the top of it.

Background-position refers to where the image is placed within the element. You can use something generic, such as left top, bottom right or center center, or something more specific such as a percentage or pixel value.

Here is the long version with these two thrown in.

background-color: #eee; background-image: url(background.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;

Take note of the order here because we’ll use the same order in the shorthand version:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Shorthand with All Five Values

Here we throw all these in respecting the order that we just outlined. Feel free to leave any of them out to revert to the defaults.

background: #eee url(background.jpg) no-repeat fixed center top;

Margin and Padding

Another place that you’ve no doubt seen some shorthand is in margins and padding. Here this works exactly the same way for both so I’ll just give examples for margin and you can apply it yourself to padding.

Margin: The Long Way

Here we have the normal way to set your margins. I’ve set each at an arbitrary value, the important parts to take note of are the order and the fact that they’re all different. Both of these will affect the shorthand.

margin-top: 10px; margin-right: 11px; margin-bottom: 12px; margin-left: 13px;

Margin Shorthand

Declaring margins in shorthand is a pretty versatile technique that saves a lot of space no matter how you do it. Basically, you just throw all your values right in a row into the margin property.

margin: 10px 11px 12px 13px;

The order here is very important. To remember how this works, just think about a clock. It starts at the top and rotates clockwise, hitting each edge. First is margin-top, then margin-right, margin-bottom and margin-left.

screenshot

Declaring all of the margin properties to be the same is even easier. If you only input one value, it will apply to every property. The code below will result in a 10px margin on every side.

margin: 10px;

Now, let’s say you really only have two different values you want to work with, meaning the top and bottom margins will have one value and the left and right will have another. By default, when you declare the shorthand top margin, the bottom will match and when you declare the shorthand right margin the left will match.

margin: 10px 20px;

screenshot

This holds true when you declare three values as well. So the following code will set the top, right and bottom margin manually while the left is automatically grabbed from the right.

margin: 10px 20px; 30px;

screenshot

Border: The Long Way

Border comes with three primary properties: width, style and color. These are written out individually as follows:

border-width: 2px; border-style: solid; border-color: red;

You can fudge the order of these properties a bit when switching to the shorthand version, but it’s best to keep it in this standard order to ensure complete compatibility.

Border Shorthand

Here is the shorthand version of these three border properties.

border: 2px solid red;

Another thing you can do with borders is declare each side of the border differently. Here we can see the shorthand border formatting still at work, just in each individually.

border-top: 2px solid red; border-right: 4px solid red; border-bottom: 8px solid red; border-left: 16px solid red;

Alternatively, you can target one of the three border properties and apply them in a clockwise fashion just like wed did with the margin shorthand. Notice how the second width declaration overrides the first.

The following will give us a solid red border that is 2px on the top, 4px on the right, 8 px on the bottom and 16px on the left.

border: 1px solid red; border-width: 2px 4px 8px 16px;

Similarly, this will give us a 5px solid border that is blue on the top and bottom and red on the left and right.

border: 5px solid; border-color: blue red;

Outline Shorthand

I don’t want to spend too much time on the outline property simply because support isn’t great and you probably hardly ever use it. The benefit is that, unlike border, outlines won’t affect your layout. If you do find yourself ever using outline, the syntax is pretty close to that for borders.

The following represents the values for outline-width, outline-style and outline-color in that order.

outline: 1px solid #eee;

Font: The Long Way

There are a bunch of different font properties that you can mess with to change the appearance of your typography. Consequently, your stylesheet can quickly fill up with blocks of styles like the one below.

font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 15px; line-height: 30px; font-family: Helvetica, sans-serif;

Font Shorthand

Font shorthand is a really heavy hitter as far as space saved. We can take all of the information above and cram it into one brief and surprisingly easy to read line.

font: italic small-caps bold 15px/30px Helvetica, sans-serif;

Most of the time, what you’ll have is probably much shorter simply because you won’t need all of these styling options. You can ditch the font style, variant and weight and just declare a quick font size, line-height and font-family.

font: 15px/30px Helvetica, sans-serif;

Lists: The Long Way

List shorthand is really interesting because I rarely see anyone mess with these properties anyway. If you are a list master though you might use the three properties of list-style shown below.

list-style-type: circle; list-style-position: inside; list-style-image: url(marker.jpg);

List Shorthand

This one is pretty predictable, just toss these three properties into “list-style” and you’re good to go.

list-style: circle inside url(marker.jpg);

CSS3 Transitions: The Long Way

CSS3 transitions are obviously still quite new and therefore support is different across browsers. Here we’ll use transition but you would likely break this out into -webkit-transition, -moz-transition, and -o-transition as well.

Here are the basic properties listed one at a time:

transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 2s;

CSS Transition Shorthand

This is one property where you almost always see the shorthand used instead of the long version. If you’ve ever done CSS transitions you’re probably more familiar with the syntax below.

transition: width 2s linear 2s;

And of course, as we mentioned above, since browsers are still not quite uniform on this you have to include those nasty little vendor prefixes. Here’s a typical example of the code you would use for a transition with maximum compatibility (IE is still left out).

transition: width 2s linear 2s; -moz-transition: width 2s linear 2s; -webkit-transition: width 2s linear 2s; -o-transition-transition: width 2s linear 2s;

Conclusion

CSS shorthand is an awesome tool to both save time and space. If you’re familiar with the syntax, you could argue that shorthand is actually more readable than the long version. However, for newbies, it’s much easier to read labeled properties so just keep in mind what your goal and audience is for a given project. If you’re writing a tutorial, you might want to list out individual values or at least explain your shorthand, in production though shorthand works perfectly.

Leave a comment below and let us know which properties you generally use shorthand for and whether or not you learned anything from the examples above.

Comments & Discussion

23 Comments

  • Chris

    Side note: looking at the markup on this specific page, I noticed you’re closing your break tags: . What’s the purpose of that? And is it even valid html?

  • Daniel

    Actually, using (br /) is the proper way to do a page break in XHTML. So yes, its valid :)

  • ezlyfe

    Good info, im learning to use them all. Howz about a cheat sheet. Beats copy and paste. Good promo also.

    Thanks

  • http://www.m-nasir123.deviantart.com/ Muhammad Nasir

    nice very very thanx

  • http://www.georgeit.com.au Nathan

    great list. i was already using some like border and margin, but was not aware there was shorthand for font and background.

  • Ramesh Vishwakarma

    Helpful for new HTML Developer… Nice

  • http://www.alltechnetworks.com/ Sumit Khaneja

    Helpful tricks for website designers. Great content of your tricks helps in polishing the designs. Thanks for sharing.
    For website designing & SEO tips & tricks visit alltechnetworks.com

  • http://www.apiture.com Apiture

    great info, especially on the closed break tags

  • http://www.rpauldesign.co.uk Robert Paul

    Very handy article. The only thing I would suggest is (on the last example) to move transition: to the bottom of that stack, so that your browser will bypass all other browser prefix values when conforming to the CSS3 standards. Firefox 4, for example, does not require the -moz- prefix to work any more.

  • Raymond

    Nice one on the borders, I wasn’t aware of them.

  • http://www.fsproduction.com FSproduction

    Thanks!!!
    Very useful information!

  • http://twitter.com/acoustikatie Katie

    These seem like such a given. I didn’t realize people would not do it the shorthand way. I guess I learned the shorthand way from the start. Great info, though.

  • http://digitalformula.net Chris

    Chris & Daniel:

    Note that although <br /> is correct from a syntax perspective in XHTML, the W3 HTML5 specification indicates that the format for a line break is actually <br> …

    Check out: http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element

    :)

  • Mark

    @Chris:2011-04-23

    Please stop spreading FUD – if you actually read the HTML5 specification you linked, you’ll notice that chapter 9 covers HTML5 using an XHTML syntax.

    Using and generating well-formed XML documents is a practice that should be encouraged. You seem to be encouraging the SGML family of syntax? Hope you enjoy living back in 1986. :-p

    @OP:

    Nice article, thanks. I’d certainly strongly encourage people to get to grips with CSS and understand these shorthands, though I think it’s getting to the point where dialects such as LESS and SASS are gaining momentum – and, wow, they certainly make creating stylesheets _so_ much more pleasant!

  • http://itcutives.com Jatin

    Generally, I used short-hand notation for margin and padding, and for fonts, but never ever I did it for ‘Background’. I was quite amazed that I didn’t do it for ‘Background’ in past, but will do it from now onwards.

    Great article Joshua.

  • http://gr8pixel.com Shan

    Great post! Can you fix the Border Shorthand code? All I see is some numbers.

  • http://twitter.com/calvein Calvein

    Very useful but I notice something about the transition property (and CSS3 properties in all cases).
    It’s better to put the unprefixed one after all the prefixed properties.

  • Marlou

    Little ;-typo there: margin: 10px 20px; 30px; should be margin: 10px 20px 30px;
    Great summary, thanks.

  • http://l2aelba.com l2aelba

    Border: The Long Way :
    border-width: 2px;
    border-style: solid;
    border-color: red;

    Border Shorthand :
    e52a080e290586a8547b968c17500fad010

    ——————-

    lol

  • http://stevencampbell.org/ Steven Campbell

    e52a080e290586a8547b968c17500fad010

    That’s how I write CSS.

  • http://www.brizk.com kai

    there is an error in margin: 10px 20px; 30px;

    get rid of the first semicolon ;-)

  • http://pixelationdesigns.com Rosie

    Nice coverage of all the attributes for each property. A mnemonic for the order of borders and margins and such is “trouble” for TRBL – top, right, bottom, left.

  • is

    thanks for sharing.. it’s awesome

Subscribe
Membership
About the Author