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.

64 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
Holland #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~
Seul
Tyne&Wear #36: September 2, 2008
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.
I'm thinking "Duped" didn't have a very good 4th of July.
Craig
Twickenham #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.

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 #65: 1 minute ago