#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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  3. User Avatar
    Permalink to comment#

    Thanks Chris. Very useful info.

  4. User Avatar
    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. User Avatar
    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

    • User Avatar
      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. User Avatar
    Esben Thomsen
    Permalink to comment#

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

  7. User Avatar
    Mark Roberts
    Permalink to comment#

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

  8. User Avatar
    Permalink to comment#

    Great work!

    As always, very informative.

  9. User Avatar
    Permalink to comment#

    Great work Chris. Nice little refresh.

  10. User Avatar
    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. User Avatar
    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

    • User Avatar
      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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.