#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
Running time: 28 minutes
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
Links from Video:
Get the Flash Player to see this player.
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?
I get that question a lot so I made a page:
http://css-tricks.com/ie-on-mac/
Thanks for the Reply Chris but I meant how did you add the IEs icon to the Mac dock.
Put your favourite icon in the root folder of your server. ( )
great subject ! excited to watch it .. god speed !
Thanks Chris. Very useful info.
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.
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
Hey Ebsen, If you’ll notice the Coda Clips button right up top, you’ll see they are already there!
forget it! Im just scrolling to fast, my bad Chris – damn this is embarrassing
Hey Chris, Great refresher, I always use trouble as a reminder for margin and padding
Great work!
As always, very informative.
Great work Chris. Nice little refresh.
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
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.