Skip Navigation

CSS Cheat Sheet (V2)

Posted June 30, 2008 in Cheat Sheets

Overview

CSS Cheat Sheet Version 2 The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

This is the second version of the CSS cheat sheet. The previous version can be found at http://www.addedbytes.com/cheat-sheets/css-cheat-sheet-version-1/.

If you like the cheat sheets, and want to say thanks, please consider buying me something from my Amazon Wishlist. Thankyou very much to those who have already hunted it down and sent me something - I'm very grateful!

Downloads

The CSS Cheat Sheet is released under a Creative Commons License (Attribution, Non-Commercial, Share Alike).

Please note: If you wish to link to a cheat sheet from elsewhere, please link to this page so others find all available versions, the license and the description.

What's New?

There are a few small changes from the first version of the CSS Cheat Sheet (which you can still download if you prefer). The most obvious change may be that it now looks different. Hopefully it's now clearer and a little easier to find the information you're looking for.

The content is largely unchanged. The syntax block has been removed, as have the media types - both were, according to feeback, largely useless. Removing them allowed me to change to a three column layout, making the properties lists far more prominent and useful.

Selectors

Thumbnail highlighting selectors list. Given the number of possible selectors in CSS, it is no wonder some people often become confused. Mixing up ID and Class selectors is easy enough, without throwing sibling, child, attribute and language selectors into the mix. This section of the cheat sheet lists selectors and shows which element(s) those selectors would apply to.

Pseudo-Selectors

Thumbnail highlighting pseudo selectors list. Pseudo-selectors are used when defining styles for elements that either do not exist, or are in a particular state. This section lists various of the pseudo-selectors.

Please note - I have left the :before and :after pseudo-selectors off this list, as I felt generated content was too complex to add to this sheet and still define in a way that made that area of the sheet usable.

Units

Thumbnail highlighting units area. CSS allows the author to define dimensions and colours in many different ways, which can be especially useful when combined with media types. This section of the sheet lists the various units in CSS and explains what they mean.

More information on units in CSS.

Box Model

Thumbnail highlighting box model area. The box model is one thing that consistently trips up those new to CSS. Apart from major browsers not all supporting it correctly, its definition can be at first confusing. The box model section of the page aims to make this clearer.

Properties List

Thumbnail highlighting properties list. The CSS specification includes a lot or properties, many of which are often forgotten or overlooked. Many of these are shorthand properties, defining many properties in one go. The outside columns of the cheat sheet list all available CSS properties.

Translations

Other Formats

CSS Cheat Sheet (V2) was posted June 30, 2008 in Cheat Sheets and has been tagged with css, cheatsheet, reference, design, webdesign and html.

106 comments

Keep up to date with this discussion with RSS or Atom.
thank you very much...
thank you....
You're both welcome :)
maylynn55
United States #4: July 4, 2008
Thank you very much, this is very nice of you!
Celeste
United Kingdom #5: July 5, 2008
Thank you very much for doing this cheat sheet. It's nice to know that guys like you take the time to help others along. May God bless you!
Duped Again By Not Paying Attention
Unknown #6: July 5, 2008
Dear Mr. S*** For Brains?

Thank you for your otherwise fine and helpful CSS cheat sheet but can you get hip and lay off the artsy-fartsy color scheme on the print versions? Printing with colored ink is a costly ripoff and not needed for most document types or grossly overdone as in the case with this cheat sheet.

Colored borders is all ythat are really needed to delineate sections of a document for readability. Alternating row color is noisy bullshit too completely useless on an A-size portrait page format.

Hope this makes sense as it is in fact common sense but thoughtless to offer something helpfulwhile in fact functionally detrimental due to its having intentionally been created to be needlessly costly.

Finally, now I frealize I've even been stupid for even printing this waste product before closely scrutinizing and realizing how wasteful it has really been as not only does it waste ink the document doesn't even mention what I contend is the most needed cheat-sheet reminder: CSS short-hand.

I for one can never remember which properties may be used or which order they are used in when supported.
maylynn55, Celeste: You're welcome.

Dear "Not Paying Attention": You are of course welcome to create your own cheat sheet if this free one is not up to your standards, or the expense of printing it is too great.

However, after considerable deliberation, I have come to realise that I have made a serious error in judgement. I have let you down, and I have let myself down. I feel that the best way to avoid a repetition of this ugly incident is for me to solicit your approval in advance for all future cheat sheets' content.

I apologise for not including instructions on printing in black and white for your printer. As I'm sure you can understand, including such instructions for all printers would take considerable time.

I do run test prints for the cheat sheets in black and white before they are released, as I understand not everyone wants colour. I now realise this effort on my part is pitifully inadequate, and I will in future include a supplemental pack with every download, entitled "My First Printer: What's The Deal With All This Colour Anyway?".

> its having intentionally been created to be needlessly costly

I am saddened that you have discovered my nefarious scheme to bankrupt the western world by including a lightly coloured background on alternate rows of this cheat sheet. I will retire to my supervillain lair to concoct a new plot.

My sincere apologies,
Dave "Dr" Evil.
thank you...
HiddenFields
U.S. #9: July 8, 2008
Thanks loads!

re: Duped...:
someone should let their meds kick in before commenting, hmmm?
Or were those restraints a tad too tight again at nap time and we\'re a little cranky-pie?
There there, dear. Things may not get better, but it will all be over soon.
Gayan
Sri Lanka #10: July 10, 2008
Great! it's really usefull
thank you...
ChesseyBoy
Unknown #12: July 11, 2008
Since I used css on my myspace profile by usinq the div tutorial my paqe is experincinq problems meaninq its not showinq riqht. im not very happy with that. Is there somethinq i need to do in order to fix that?
Lennart
Netherlands #13: July 12, 2008
Thank you!!!!

I code css for hobby and have no education in this. The problem is that i always forget the most simple things ... with this it's a lot easier!!!
I absolutely LOVE your candid response to the idiot who wasn't paying attention! ROFLOL! I laughed for hours, and all I wanted was your wonderfully created CSS cheat sheet. This CSS cheat sheet has totally made my day – or was it the response? LOL... Thanks!
Ludwig
France #15: July 13, 2008
I was looking for this !!!! Thanks a lot, great work !!
Thank you so much for this! I have Dreamweaver CS3 and the templates
use CSS and I had no idea what its all about. Having worked with HTML
for so long it has become a bit of a learning curve for me. You just saved
me a lot of time!
Now I can understand what makes CSS work-able better.
Hi Dave,
Thank-you SO much for the cheat-sheet. It's one of the best (if not the best) out there. Personally I like it being coloured and delineated (more colours would be cool, you haven't bankrupted the western world yet, and Epson et al would like you to earn more of their money :) ).

I`m a designer and versed in CSS for many years now, but when you are busy doing flash stuff or whatever else for months, it's easy to forget the simplest CSS rules.... which is why I searched for a decent cheatsheet and found yours.

CHEERS!

Gary Storm
Thanks for the CSS Cheat Sheet. It looks well-layed out and packs a lot of info into a short space. This is a fantastic for beginners like me, thanks.
thank you...
Jacob
China #20: July 23, 2008
Thanks. I found this on the book-------CSS: The Missing Manual,Now I'm
building my own IT website,and it will help me a lot~
Brian Lowe
United Kingdom #21: July 24, 2008
The cheat sheet is a great idea and very clear and well presented, but not quite what I was hoping for. I already have an idea of what the selectors are and how to write CSS rules, but I'm aware that browsers are not all equal, and some perform better than others with particular selectors and rules.
Most helpful for me would be a reference showing the arrangement of selectors (just as clearly as you have laid them out on this cheat sheet) but some indicator of version or browser support for this selector.
Also helpful would be an associated reference showing the work-arounds (sadly still needed) to acheive the same in IE as FF, or how to include or mask rules for different browser implementations.
Nevertheless, I appreciate your work. Well done for making this available.
thank you...
quantif
Uzbekistan #23: July 25, 2008
Big thanx Dave.
thanks for the good tutorial :)
cathy
United States #25: August 1, 2008
I'm so confused, but intend on learning this if it drives me crazy, like you know who. Teehee.
Thank you for sharing.
xo
cathy
United States #26: August 1, 2008
Forgot the URL.
thanks for this very good tutorial.
Thank you for sharing...
Vinci
Unknown #29: August 11, 2008
I like your cheatsheets very much. I use them frequently. But I have one remark: maybe it's an idea to have them landscape instead of portrait? I usualy open them in Preview when programming. When they're landscape, I can use more screen-space for the cheatsheet which makes reading easier!
Vinci
Unknown #30: August 11, 2008
I like your cheatsheets very much. I use them frequently. But I have one remark: maybe it's an idea to have them landscape instead of portrait? I usualy open them in Preview when programming. When they're landscape, I can use more screen-space for the cheatsheet which makes reading easier!
very nice man
thank you for sharing
These cheat sheets are wonderful! I had a few from other sites, but yours are much cleaner and to the point. Thank you very much.
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
Thank U so much~
Cheers mate. Really good to help my old brains out.
TraderRod
Islamic Republic Of Iran #37: September 4, 2008
Great stuff - keep it going.

Regards,

TraderRod
Thank you, very helpful.
MT
United States #39: September 11, 2008
I'm thinking "Duped" didn't have a very good 4th of July.
Craig
United Kingdom #40: September 13, 2008
Thanks a lot - this is really helpful!

"Duped" - you clearly have issues dude..
Nice and clean collection. Great job. Added on my feeder. Thanks a lot Dave.
yellow
China #42: October 6, 2008
thanks very much!!
Sam H
United Kingdom #43: October 6, 2008
great job with the cheatsheet :)

As for duped, happy days! Let me just get this right, you downloaded a helpful resource that somebody has offerered for free. You have then carelessly printed without a thought in the world, yet YOU have been duped?

Duped into what exactly, printing the sheet? Yes that's in fact right, Dave is wholly responsible for your printer use. Why don't you add your paypal address here and we can all slip you a couple of quid to cover the costs?

Dave, thank you for your quality response to duped. He ruined my day.
jSun
Australia #44: October 14, 2008
Thank you indeed for your cheet sheet. Im just starting out this will definately help. Thanks again!
Wow! Really nice. request- can you do a cheat sheet for css browser hacks?
Thanks Dave for writing an interesting and informative CSS work exercise. I really must bring to attention the issue raised by ‘Duped Again By Not Paying Attention’. – The language and tone of their comment does absolutely nothing constructive in improving the learning and contributing experience, it merely serves to be provocative and goes against the spirit of the Internet.

Many thanks once again Dave
thanks..
I'd like to translate your CSS Cheat sheet in french and put it on my site...
Where can i find the source of the file ?
Thanx,
Cyprien
jing
Viet Nam #49: October 29, 2008
thanks you :)
Floating Guest
Australia #50: October 29, 2008
A champion effort, that! And Forklift nailed it, too - "Thanks for sharing.". Kudos on selflessly sharing your work/findings/research with other users. That is the heart of the WWW, right there. This is what computing should still be about, IMHO.

Love your work - best of luck in future projects.

Also, I can't figure out if your reply to Duped was actually offensive or not - I think it was far too well worded to truly be offensive. Or does that actually make it more offensive? Nice work - the very picture of 'impossible ambiguity'! Well, whatever it is, it's extremely amusing.
natalia
Australia #51: October 30, 2008
will come in handy, thankyou!
What a great resource. I'm grateful for all the hard work that went into this, and to the Tweeter who brought this to our attention via his blog (http://twitter.com/imjustcreative).
hello
Unknown #53: November 1, 2008
wow, thats awesome! thank you very much!
Thanks for the time and thought that you put into this sheet.

@Altum Re: Duped. couldn't have said it better myself.
SITS
Hannover/Germany #55: November 5, 2008
Thank you for sharing your work. Well done!

Ulli
webtechnepal
Nepal #56: November 6, 2008
Thanks for sharing. Great Job
Couldn't help but sharing this great cheat sheet too! This is really handy, I always end up searching google or w3schools when I forget syntax. I put a link here if you don't mind (hopefully will help you in google =D): http://phireitup.blogspot.com/2008/11/css-cheat-sheet.html
this is good but how can ı change this class elemets in this.Thanks
Deni
Indonesia #59: November 20, 2008
I'm newbie on designing website. The expert said that table based layout is outdated, and now is the new era of css based layout. And your cheat sheet laid my way to that new era :) .. I think so. Many thank for this nice job.
Thanks, what a great reference, all on one page! Exactly what I needed for a quick memory jog.
mark
United States #61: November 23, 2008
excellent css reference. The graphic showing all the padding margins and whatnot is great. Even though I know this stuff, it is awesome to be able to double check (or first check on off days) with this sheet. Great work and thanks for contributing to the community. Don't worry about the nay sayers - 99% of us appreciate it.

Also like the live comment preview - very nice.
Thank you indeed for your cheet sheet. Im just starting out this will definately help. Thanks again!
Oo.. I like it. Thanks.
huangzhenhong
China #65: December 8, 2008
Thank you !
I'm a college student.The "css the missing nanual" helps me a lot when i was developing a web site.It is a good.
Thank you Dave.

And don't worry about people like 'Duped Again By Not Paying Attention'. Haters will always be there and I don't see him offering a black and white version either (why are they always anonymous, hmm)

Again, thank you Dave. Keep it up! ^_^
Many thanks for the work!
It would be even greater if which selector/attribute is supported by which browser(s) is also noted.
Michael
United States #68: December 29, 2008
One minor correction. Pixels are not absolutes sizes, they are actually relative units. http://www.w3.org/TR/CSS21/syndata.html#value-def-length

But Internet Explorer's improper handling of them makes them act fixed for that browser.
Hey! excellent content on the cheat sheet.. thank you very much for the hard work!
I just made a post in spanish about your cheat sheets in my blog:
http://www.lawebdejuan.com.ar/2009/01/cheat-sheets-una-ayudita-mano.html
just to let u you know.
Greetings!
Hi Dave "Dr Evil",
Good response to the "intelligence-challenge" (duped) individual above. Some comments stun me. I would probably have deleted it, but I think your response was far better (and more entertaining for your readers :) ).
I just wanted to say thanks again for the HTML Character cheat sheet and now this CSS cheat sheet that I've come back for. It's time to look at my CSS again... a fun weekend ahead! ;) Thanks again, Steve Booth
Anonymous
Unknown #71: February 4, 2009
Thank you!
This is truly a cheat sheet of simple things that matter a lot in CSS. You've done it again, Dave.

I literally love your way with words, even when offended.
Dr Madvibe
United Kingdom #73: February 16, 2009
Dave, you're the MAN.

In fact you're double MAN, because of your response to Duped ;-)

Now how do I turn my printer on? Have I got a printer? Can you let me know please.
Anonymous
Denmark #74: February 28, 2009
eyyyyyyyyyyy
very good, thanks
thx!
Great! it's really usefull .
This jpg is now on my desktop :)
Just wanted to say thank you for your cheat sheet series. I can see these being very helpful, not only for the beginners, but for those that have been doing this for years and years. Thanks, again.
very helpfull cheat sheet. I'm now printing it to paste on the wall behind my monitor
many thanks
Thanks Dave for all the content. It is great!

I actually hand out your cheat sheets in my classes (making reference to your website). You save me heaps of time on writing something similar for my students.
very good, thanks
very good, thanks man.
Kath
Santa Cruz #83: March 12, 2009
Superb. Thank you Dr. E. !

Keren
United Kingdom #84: March 20, 2009
Many thanks Dave a great time saver in understanding Css, learning it and using it for modifying websites.
Love the above comments(I'm duped!? (not paying attention)) they provided me with a great laugh a good start to my working day.

your work is much appreciated.
Keren
Hey Great work of collecting world into one page. Great resource for starter to became an expert.

Thanks for collecting it into one place
Jen
San Diego, CA #86: March 27, 2009
I have a big legal size pad of paper at my desk that I make notes on to try to remember all the short cuts and what everything means. I some how stumbled on to your site and found your cheat sheets. WOOHOO! Thanks for doing all the work for me!


I like reading comments by other because you never know what you may learn. I came across the comment made on July 5th, 2008 and I couldn’t believe it. What an ungrateful big stupid! Can you ban him/her from your site forever?! Its ungrateful losers who make it harder for the rest of us to get help when we need it.

You comment back was great! I got a good laugh from it... good for you!
Grateful
United States #87: March 28, 2009
Awesome Possum

All of the sheets I've downloaded, very useful.
Thank you for this cheat sheet. Very helpful!
marina
Russian Federation #89: March 31, 2009
thx. Very nice )
Evil Dave,

Phenomenal. You always deliver the goods, and they are invaluable to our team. I'd love to connect sometime and see if there's something we could do together in the online brand-marketing space. We're about to go public with a unique Search=>Find=>Optimize=>Distribute Media platform.

Thanks again for the kick-butt cheat sheets. And the snarky response to "Not Paying Atttention". Seems his language translator was turned to "ID10T" mode.

Best,
ME
Interesting and useful. Nice glossary, thanks! You cool!
Very nice job. A lot of work went into formatting this cheat sheet, and it looks great and is a help to this particular forgetful old lady. Thanks.
Thanks for the great CSS sheet.

I concur with Betty from China. It would be very useful if this could corrolate with PPK's browser support tables so we know which selectors to not use.
Cool !
thank you very much...
thanks
This is cool...
Thanks for such a comprehensive cheat sheet..
Jamie
New Zealand #97: April 22, 2009
Cheers for this - something hand-drawn on my V1 copy (and about to draw on the new copy), is the top/bottom/left/right ordering in the shorthand form for the border/margin/padding/etc directives - I don't know if I'm the only one who gets these mixed up.
hinni
kopavogur #98: April 25, 2009
how do i find the cheats
i think i should read more english , i can't catch you.
Thanks for the incredibly useful cheat sheet. It's now bookmarked.
I'm currently doing web design at college, Ive been telling my fellow students to visit this as a must !!!
thank yout very match! bookmarked!
Great cheat sheet - thanks!!
I am still learning css -> http://www.detlev-lengsfeld.de/entry/2009/jun/30/5-kleine-css-tools/

and this is very usefull. Thanks 4sharing.
Thanks for this - should come in handy - will do a bit of research on some of these tags as hadn't come across them as of yet.

Post Your Comment

· Comments with keywords instead of a name have their URLs removed.
· Your email address will not be displayed or shared.

Live Comment Preview

Anonymous
United States #107: 1 minute ago