CSS Shorthand Cheat Sheet

If there is one thing that I’m a sucker for, it’s cheat sheets. I love letting my eyes fall upon a single page and navigate right to what I’m looking for. It takes the whole “open book, locate index, look up word, find page, find where on page” process out and beats it with a big stick.

So the other day I was working on some trivial CSS, and found myself having to look up the shorthand for ‘list-style’ for the millionth time. I don’t know what in my childhood prevents me from remembering it, but… it must have been traumatic. Anyway, I looked over at my CSS cheat sheet, and it was absent. So I searched the webbernet for a cheat sheet. I found Dustin Diaz’s guide, but that wasn’t what I was looking for. It was filled with information, however I know the values-I work with them constantly. I just wanted to figure out the order and defaults… and put them on the wall.

So here is my CSS Shorthand Cheat Sheet.

This cheat sheet contains all of the cases (that I can think of) where a CSS property has a shorthand notation. I’ve even added the obscure and rarely implemented outline and outline variations, as well as the Aural pause and cue properties (respecting accessibility). I even threw in the color shortcut (#abc) in for good measure. 🙂

From a design perspective, there is obvious room for improvement. I haven’t really messed with InDesign since it was called Pagemaker, and I was doing my high-school newspaper. So that was interesting. I also wanted the design to look slightly disorganized… anyone who’s ever seen my yellow shoes will know why. There are saturated colors, but no heavy backgrounds. I wanted it to be printed, and I only have a grayscale laserjet printer. While on the subject, it looks somewhat faded when printed. I have to look into adjusting the colors for priting grayscale, but I’d prefer not to darken all of them.

Anyway, I hope that someone will find it helpful. I’m going to use it tomorrow.