#47: CSS Shorthand

There are a handful of CSS attributes that can be combined into a single attribute for coding brevity. I endorse the use of CSS shorthand whenever possible. It saves space and makes code more readable. In this screencast I introduce all of the common ones and go over a few gotchas that can happen when using them.

At the end, I introduce a new site of mine I hope you all find useful: HTML-Ipsum

Links from Video:


  1. vincent jaubin
    Permalink to comment#

    Great Tut Chris. One question that is kinda out of topic… I noticed on your dock 2 icons for IE’s. What virtual machine are you running and how were you able to get IE’s shortcuts on your dock?

  2. v-render
    Permalink to comment#

    great subject ! excited to watch it .. god speed !

  3. Jackie
    Permalink to comment#

    Thanks Chris. Very useful info.

  4. RotMos
    Permalink to comment#

    Hi, thanks for another great vidcast. One small off topic question thou. What’s the HTML app in your dock, next to VMware? Some kind of offline validator and if so where can you find it, I’ve been looking for something like that.

  5. Esben Thomsen
    Permalink to comment#


    A idea for html-ipsum could be to provide Coda links, so those of us who uses Coda, doesn’t have to copy/paste the clips into webclips.

    for instance like on coda-clips

    • Chris Coyier
      Permalink to comment#

      Hey Ebsen, If you’ll notice the Coda Clips button right up top, you’ll see they are already there!

  6. Esben Thomsen
    Permalink to comment#

    forget it! Im just scrolling to fast, my bad Chris – damn this is embarrassing

  7. Mark Roberts
    Permalink to comment#

    Hey Chris, Great refresher, I always use trouble as a reminder for margin and padding

  8. Murray
    Permalink to comment#

    Great work!

    As always, very informative.

  9. nathan
    Permalink to comment#

    Great work Chris. Nice little refresh.

  10. Bulb
    Permalink to comment#

    nice work; btw it’s weird with the 3px border default but I think the same default is in photoshop when you stroke a layer which is also a border in fact

  11. Philippe Rivard
    Permalink to comment#

    Hey Chris!

    Thanks again for the reminders, I always forget about the 3 first font shorthand values!

    Quick comment about the “border” shorthand, it doesn’t really matter where you place your values, as long as you declare them all. As in:

    border: #color dashed 1px; or
    border: dashed 1px #color; or
    border: 1px #color solid;

    You get the idea. I also think that goes for all the other shorthands. As long as all values are declared and are keywords, you can interchange the values, except for the background “left top” (non-keywords values). But this is just a thought, didn’t try to mix the other shorthand values.

    Keep up the great work, love this site :D

    • Chris Coyier
      Permalink to comment#

      I think you are right, that works for border, but you need to be careful in general. Like I mention in the video, the ‘font’ attribute is particularly weird about that.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.