Grow your CSS skills. Land your dream job.

#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:

Comments

  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. Chris@

    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

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

    Great work!

    As always, very informative.

  9. nathan
    Permalink to comment#

    Great work Chris. Nice little refresh.

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

    • 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".