Skip Navigation

CSS Cheat Sheet (V1)

There is a newer version of this cheat sheet!

The CSS cheat sheet is designed to act as a reminder and 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. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size CSS cheat sheet.

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.

Syntax

Thumbnail highlighting syntax area. Syntax is one area in CSS where many people stumble when learning it. Often, designers new to the language can spend a great deal of time trying to work out why a specific style isn't being applied, and many times it is either due to a syntax error or inheritance.

Selectors

Thumbnail highlighting selectors list. Given the number of possible selectors in CSS, it is no wonder some people often become confuse. 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.

Media Types

Thumbnail highlighting media types list. One of the reasons CSS is so powerful is that it makes allowance for different types of devices accessing the same data. This is controlled through media types, and though they are not used in CSS as much as many would like, the chances are that this will change and media types will become more important. This section lists the various media types defined in CSS 2.1.

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.

Units

Thumbnail highlighting list of units. 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.

Properties that Inherit

Thumbnail highlighting list of properties that inherit. Inheritance is another area that trips up new and experienced CSS developers alike. An element within another element can use the same value as its ancestors. For example, if you define a font family for a <div>, and next a <span> within it, the <span> will use the same font family as the <div>, unless explicitly set to be different. Not all properties inherit though, and this section lists (alphabetically) those that do.

Download

So now that you know what it does, please feel free to print out the CSS cheat sheet:

Please note: If you wish to link to the CSS cheat sheet from elsewhere, please link to this page so others find the description, rather than linking directly to the sheet.

Update - 4th July 2005

Brian Warren has created a CSS Cheat Sheet dashboard widget for Mac OS X (and he was kind enough to check with me first, which I really appreciated). (His site is also well worth checking out - a nice use of perspective really helps it stand out).

And finally, 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 nice - I'm very grateful!

208 comments

This is great! Incredibly handy Way to go!
Thanks Jeff. :)
Very neat! I am sure I will put it on my board. Thanks.
Nice work Dave, this one makes this list too. I may actually have to print it out and use it. PHP, well...I've been using it for years and the online reference is so good so...
Anonymous
United Kingdom #5: May 1, 2005
Any chance you can produce this in a printable format? The current PNG uses antialised text which simply prints out as out of focus (if truth be told, thats how it looks on the screen as well, but screens are more forgiving of poor quality images than are printers). If you must stick with a PNG, then please make it perfectly crisp black on white text without antialising, though I assume that you produced the PNG from some text format page - this is crying out to be turned into a nice clean HTML page for example, which would then print out perfectly.
I second the motion for a pdf or some printer friendly format. I want to print this in 36"x48" to hang!
 Russian Federation #7: May 2, 2005
Just wanted to show you guys some very useful CSS example - some borders properties and cell background color stated in CSS text file, site menu on yr left and partner list on yr right..
etoelz
United States #8: May 2, 2005
Stick the date and/or revision. This would be helpfulwhen you want to check for the lates and greatest. Thanks for the work
 United Kingdom #9: May 2, 2005
Nice idea, etoelz.
This looks very helpful! Thanks so much for posting it. Like several others before me, it would be great if this was in a format like .pdf that would print the text more clearly.
Carl
United States #11: May 2, 2005
Yes! This is crying out to be a PDF, please!
 United Kingdom #12: May 2, 2005
Looks quite handy. Good job.
Oh I'm soo gona print this (pdf pls?) and stick on my desk! BIG BIG THANKS! Great article! :)
Hmm.. been 3 days and no one seems to create a PDF version. I've been wanting to convert the PHP Cheat Sheet but lack motivation to do so since I mostly code in ASP. But of course CSS Cheat Sheet is a must have for every webdev hence my attempt to create the PDF for hires printing. Please feel free to download from my site http://ganius.tanuel.com/blog/20050503_6
Inside the .zip file I put .doc, .pdf, and .xml for your perusal.
 United Kingdom #15: May 3, 2005
What a handy thing.

Ta very much Mr.Daniels.
This is nice and useful!

However, I'd like to point that :link, :visited, :hover, :active, :focus and :lang(foo) aren't pseudo-selectors, they are pseudo-classes. :first-line and :first-letter are pseudo-elements (http://www.w3.org/TR/REC-CSS2/selector.html).
Hi Marko,

I decided that rather than have two sections taking up too much space, I'd group them under a single heading, pseudo-selectors. You are completely correct though.
A Webmaster
United States #18: May 4, 2005
Would it have been more customer-friendly to produce the CSS cheat sheets as web pages or a downloadable document (Word? of PDF?)? Creating .png images may be using a universal graphics format but disabled readers cannot see the fruits of your labors.
hello,
i found this page right now, and its such a good idea ... i wanted just to say : thank you
nice greetings from vienna
:) bit
Thank you.

This has already (less than 5 minutes) helped solve a puzzle.
First of all, I'd like to thank you for a great resource :-) (I hope you don't mind the fact that I've <a href="http://pub.phphacker.dk/code/css/css_cheat_sheet.png">mirrored</a> it)

But secondly, I can't help to think of the funny thing about a sheet about CSS (that mostly looks like one for the web) has been created as an image, and not an XHTML/CSS design.
Pat Langille
United States #22: May 4, 2005
Thanks for the nice cheatsheet. I did notice that you have the border properties (border-top, border bottom, etc.) all asterisked as shorthand properties, rather than just the first one.
The border-top, border-right, border-bottom and border-left are all shorthand properties.
Great!!!!
i write a review (in italian) of it in my blog

Ciao
I find that I can't download the entire PNG file(only get 56.6KB of all). Can you fix it?thank you.
Can I translate the "CSS Cheat Sheet" to Brazilian Portuguese?
 United States #27: May 5, 2005
Very nicely done. Extremely helpful. I wish I could remember this stuff, but it just doesn't stick in my head. Thanks.
Hi! I am From Brazil!
Sorry for my bad english. :-D
I have a site about Web Standards called Tableless (http://www.tableless.com.br/)

I saw your article about Cheat Sheet CSS, and I created a copy of your image, but, translated for Portuguese-Br.


Any problem?

You can see the image here:
http://www.tableless.com.br/referenciacss.gif

Thanks advanced.
 United States #29: May 5, 2005
You rock! Thanks for posting the CSS cheat sheet -- bottle this thing up and sell it :)
 United States #30: May 6, 2005
Very Nice. Thanks.
Thanks, this one's going to be on the side of my desk!
me
France #32: May 9, 2005
good ! what about another sheet with only css hacks ?
Thanks for the great reference! This is definitely worth a bookmark.
DamDam
France #34: May 10, 2005
Hello,
Thamks for this great work. Is it possible to redistribute this png file ?
Andy
United States #35: May 11, 2005
I love this! But, like everyone else, I'd rather have a PDF, or whatever source format you had. The PNG looks really bad when I print it.
whiskeylover wrote:

great initiative! why not publish the original format so we can make a .PDF ourselves?
"asdf" (it's nice to be able to hide behind anonymity, isn't it): Are you saying that "Visibone" are the first people ever to come up with help sheets? You might want to rethink that one, brainiac.

No, the idea isn't stolen from Visibone. I used these sorts of aids at school. I've personally used my PHP cheat sheet for some time. Thousands of people have help sheets and cheat sheets scattered over their desk. The original idea, for the PHP sheet, came out of frustration at having to visit the PHP site all the time. This CSS sheet was a logical continuation of the same ideas.
DamDam
France #39: May 12, 2005
Hi,
Excuse me, but I renew my question : is this png file licensed under Creative Common License ? I would like to incorporate it in a css plugin for an unknown (yet) french CMS. I would be very pleased if there is no problem with it
Hi Damdam,

Sorry, I missed your question the first time around.

The image is not under a creative commons license, no.

That's not a "no, you can't use it". That's a "Why don't you email me at dave@addedbytes.com though and let me know what you want to do.".
I realize you've stuck to CSS standards, but there's two hacks I'm always looking up:

Hide a rule from IE:
html>body p {
/* declarations */
}

Hide a rule from all browsers but IE:
* html p {
/* declarations */
}

Reference from - http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/

Would love it if you could work those two in (if not, I'll be forced to resort to ink).

Another comment:
You've outlined where shorthand properties are available and in most cases the order of subsequent properties is listed as specfied by the W3C (top, right, bottom, left, for example). This makes it easy to switch to shorthand.

However, with *font this doesn't seem to be the case. Probably should be:
*font
font-style
font-variant
font-weight
font-size
line-height
font-family

(I know the shorthand will work in any order but there's no harm in being anal. And of course this isn't exactly perfect as the syntax requires font-size/line-height but we get the idea.)

Anyways, this is excellent work. Good job.
Interesting stuff, thanks.

Anyone knows if there is such a thing summing up the hacks and the browser quirks?
PDF is now online, as requested :)
Wow, how popular?
Diaan
Denmark #45: May 14, 2005
wow, the explanation of the box-thing, with width, height, padding and margin is really clear. I'm always confused on how it works exactely.
Thank you!
Wow, really great, it's good, that there are some people who want to do such kind of papers :-)
Great work!
But the PDF links don't work for me!
That's just great!!!!
That's exactly what I was looking for!
Big thanks
Greg
Thanks, what a great reference, all on one page! Exactly what I needed for a quick memory jog.
Dave: two words (well, two that are StudlyCapped into one): CafePress. http://www.cafepress.com/shop/geeks/browse/Ne-25_N-3807_bt-2_pv-geekcheat.11507711
You might think about incorporating Mr. Hicks' recently CC-licensed 3D box model to your already amazingly well done cheat sheet. Thanks! (love your PHP one, too...)
Very great work!!!
Your PDF isn't working.
 United States #54: May 27, 2005
Wow. Wow. Thanks so much! I've printed it out and hung it above my desk.

One of the really inspiring things about working with web standards is encountering the community of people like you -- people who make it easy to play by the new rules.

Thanks thanks!
Hey, great work! That's what I needed all the time. It helps me very much, thank you! :-)

How have you designed the Cheat Sheets? What program did you use?

Greetings from Kiel, Germany
Jule
I've printed out the pdf. Great! It's very Useful. Thank you.
 United Kingdom #57: June 3, 2005
Just awesome will be saving this on my bookmarks!
Thank you for this very helfull document. From France.
Thice
Germany #59: June 9, 2005
This is a really great idea!!
Thanks !
Very usefull.
 United States #61: June 23, 2005
very cool, but the link to the pdf is broken :/
Istvan
Germany #62: June 27, 2005
This sheet is the most valuable thing that I have ever printed with my printer ... :-)
Thanks so much for making a PDF version available. It make printing so much nicer.

- jphillips66
 United States #64: July 7, 2005
Printed, plastic wrapped and handy. Thanks
Maverick
Germany #65: July 8, 2005
Thank your for the CSS cheat sheet. Please make for other domains too: java frameworks like Struts, WebWork, JSLT, etc.
Jake
Germany #66: July 9, 2005
I must say that those cheat sheets are just cool. Please, please, please make one (or two) for JavaScript too :).
Hi, Dave,

very-very useful! Thanks for a great work - I've added a link to your css cheat sheet on both <a href="http://www.alvit.de/web-dev/">Web-Dev-Bookmarks</a> and <a href="http://www.alvit.de/handbook/">its 'pocket' version</a>.
No more table tags for me. Thanks Jeff! :D
Thank you from Russian-speaking developers! =) Placing on my board ...
Couldn't bare "69" comments longer ;-) shifting it :-)
Whatever...

Your CSS Cheat Sheet is worth buying a hyper large banner printer so I could see it accross the office!

Grabbed the PHP/CSS CS widget for my powerbook too :-)

Thanks!
Gonna blast all those ugly tables out of our intranet *grin*
Brandon
United States #71: August 25, 2005
What a helpful chart . . . now if you could just do one about css browser compatibility.
Useful, neat and simple.
A must.

Thanks a lot
Thanks for your efforts. All your cheat sheets are a great learning and reference resource!

Maybe a browser compatibility reference someday? (Or at least for the Box Model?)

Thanks again!
nicobilou
France #74: September 6, 2005
thank you very much for this helpfull tip !
Antonimo
Sweden #75: September 21, 2005
Excellent Reference.

May I also point you all to the DevBoi is sidebar extension for Mozilla and Firefox browsers. This is what it contains:

HTML 4.01 elements, attributes, and entity tables;
CSS 2 properties, compatibility chart (IE 5 Mac, IE 5, IE 5.5, IE 6, Mozilla, Opera 5, Opera 6, Opera 7, Konqueror 2.2, Safari 1) and context links;
DOM 2 objects, methods and properties (Core, HTML, Events, Views, Traversal, Ranges and Stylesheets);
XUL element reference and tutorials
I need to top your css examples. thanks!
SirNot
Netherlands #77: October 12, 2005
Nice cheat sheet, I've gotten used to having it handy when I work on web pages. However, while experimenting with different CSS selectors, I noticed an error in your last selector example. You say that a[lang|='en'] would apply styles to all anchor objects with the attribute lang beginning with en. In actuality, to do such a thing you'd want a[lang^='en'], a[lang|='en'] would style anchor objects with 'en' being a value in a hypenated list. Just as a suggestion, perhaps you could also add the $= and *= selectors in a future revision.
Behnam.B
Islamic Republic Of Iran #78: October 14, 2005
Great! Keep up the good work
Much better than the W3C version!
Andrea Ca'Zorzi
Belgium #80: October 29, 2005
I've printed and sent the bookmark around to all my fellow web developers.

There is only one possibly misleading line in the 'pseudo-selectors' box, whereas one might end up thinking that the behaviour of the :first-child (pseudo-class) is similar to that of the :first-line and :first-letter (pseudo-elements).

The :first-child pseudo-class applies to a given element if it happens to be the first child of his parent element and not, as one might understand, to the first child of the element.

In the following example:

&lt;div&gt;&lt;p&gt;&lt;strong&gt;Who is p:first child?&lt;/strong&gt;&lt;/p&gt;&lt;/div&gt;

p:first-child applies to the p, not to the strong element.

The trouble is to make this difference clear in the limited space of a cheat sheet.
THANK YOU ("Danke schön!") for that handy composition!

Btw. To avoid dog-ears ("Eselsohren") I'd prefer landscape format, so the Cheat Sheet would fit perfectly between me an my keyboard without overlapping the leading edge of my desk all the time.

Thanks!
Sebastian - Berlin, Germany, Europe
Any chance anybody out there could point me to a CSS browser compatibilty chart. Somewhere out there.....

Thanks
Thanks. This is great especially since it's a .png.
Gary
United States #85: January 6, 2006
Sweet. But please correct the spelling of "seperated" to "separated".
Very very great work!! I love all cheat sheets from this site!! keep up the good work!
Mate... This is... Simply... ... ... Wow.
 United Kingdom #88: March 6, 2006
thank you for this.
Thanks all - glad you like it :)
wow... awesome:) thanks a lot:)
Dave, it'll be really handy for folks in my company, well done.
 United States #92: June 21, 2006
This is the clearest, most comprehensive resource I've come across.

I guess this means I love you.
Adam
Poland #93: July 20, 2006
God bless you. I know beginners sure will :)
David McCabe
United States #94: July 29, 2006
This is great; the only thing it's missing is the possibly values for properties. For example, the 'display' property has lots of possible values and it can be hard to remember them. Thanks!
This is a fantastic resource for beginners like me, thanks.
This is an excellent stuff and thanks to google that I was able to reach this site...Keep it up!!
BrettFromTibet
United States #97: August 19, 2006
Very handy, very much needed!

great job.
 Russian Federation #98: August 28, 2006
very interesting!
Louie Johnson
Australia #99: September 4, 2006
Thankyou very much, kaibigan. More power, Mabuhay!!!!
I think I'll love you forever.
Kobe
Hong Kong #101: October 4, 2006
Good stuff man.
Andy J - London
United Kingdom #102: October 14, 2006
This is a great idea, all i can say is brilliant, brilliant and brilliant! These cheat sheets make life a bit easier on remembering what syntax works with what language!
Petar Radosevic
Netherlands #103: November 5, 2006
Thank you very much for this.
Donna
United States #104: November 6, 2006
Thx. Handy indeed. 10's of papers in 1.
excellent sheet! thanks for sharing it.
Anonymous
Portugal #106: November 8, 2006
Very useful! thanks
Thankx for this gr8 idea.
Thanks very much.
It's great!
Great job ! Thank you very very much.
Windows Reseller Hosting
India #110: January 3, 2007
That is really handy, will be very much helpful for me, will take a print of it and post in on my board. Thanks.
Scott
United States #111: January 5, 2007
Heh... I downloaded this for my iPod from mogopop.com . It's pretty convenient to have.
Very nice... thanks a lot...
These are great, only gripe would be to list the properties in their shorthand order. For example the fonts tag properties listed as style, variant, weight, size, family.

Instead of as they currently are, family, style, variant, weight, stretch, size.
Great job! Thank you.
this is super! i have this printed out and pinned on the wall of my cubicle!
anon
United States #117: February 24, 2007
These html and css cheat sheets are fantastic. I'm just starting to learn about web design, but it seems that, at this point in my life, I've lost the patience to wade through 400 pages of filler and useless 'sample code' in whatever instructional book. Your cheat sheets are basically all I need to get started. Thanks again.
Thanks for the CSS Cheat Sheet. It looks well-layed out and packs a lot of info into a short space.
All of your cheat sheets are invaluable! Thanks for making the effort and doing it WELL!
bjorn corluy
Belgium #120: March 14, 2007
awesome!!
David ARMENIA
Belgium #121: March 18, 2007
WOW WOW

I have download this file but doesn't get a crap what it means!
I thought that i could cheat or know how to cheat by reading this file. But noooop nothing
Can someone tell me how and where is this file made for and how to use it and where.

Thx

GRTZ DAVID from Belgium

ARMENIA 4 LIFE
Just a note of appreciation- thanks!
Anonymous
Germany #123: March 20, 2007
Thanks for these useful collections :)

Would be nice though, if you could re-order the pseudo classes this way:

:link
:visited
:focus
:hover
:active

You need to define them in this particular order (as much as I know) and it would be nice to reflect this in the "listing".

Anyway, great work!
Huffy
United States #124: April 18, 2007
This sheet is great, thanks so much.
Very nice and useful CSS sheet! Thanks!
the best cheats I've seen so far
Great job! Thank you man!
Excellent site i've been looking for this sort of thing for ages.
this is great
United States #129: July 4, 2007
Hey, thanks for making this available
dude
United States #130: July 4, 2007
Thisw is really cool.


Thanks
Now I'm ready for redesign. Thanks:)
igitur
Unknown #132: July 17, 2007
To reiterate... great tool!

I'm missing the div[property^='startswith'] and div[property$='endswith'] selectors though.
Thanks! Very useful.. I am so lazy and forgetful and this will come in handy
Deadly.. good stuff.
Outstanding Cheat Sheet!! =)
Thanks for the great resources.

Thought you should know, your page's layout has been compromized by the IE italics problem. Please see http://positioniseverything.net/explorer/italicbug-ie.html for more detail. Looks like you're going to have to modify your css by a few pixels.
Hi Robert,

I don't see where this is an issue. Could you please point out where this bug is causing a problem? Thanks.
this is awesome, thanks!
God bless you. I know beginners sure will :) dats 4 sure
Aussie job search
United Kingdom #140: August 31, 2007
I love you man! This is such a succinct cheat-sheets that I always have on my desktop!
Hey, I love your Cheat Sheets including this CSS one I have many a time forgotten a simple function that I have been able to find quickly using your cheat sheets, I must say these are the best free cheat sheets I could find.

I even posted on my blog about your cheat sheets: http://oysblog.uni.cc/2007/08/31/cheat-sheets/
Nice Sheet, I have been looking for a quick reference like this. The smallest I have found is a pocket book. Its already on the wall.
Thx a lot great cheetsheet
Megan
United States #144: September 4, 2007
I think I love you: This is helping me so much.
This summer Jack Daniels & Vodice (place on Adriatic) were my obsession...
Great stuff! ;-)
Why does Mac always get the fun widgets and PCs get nothing? Conspiracy? I think so. ;-)
Another great cheat sheet, thanks a lot!
Thank you for this!
Thanks! it is good help for css
 Bosnia And Herzegovina #150: October 11, 2007
It will be very usefull to me. Thnx.
Thanks a lot - have until now only used pre-made CSS sites or made everything with templates in Dreamweaver. I will like to make a link to this fine resource from my start up site http://www.Smart-websites.net
Great stuff! ;-) Thanks!!
I haven't use it.. but I can make it out that its gonna very useful.. Thanks alot ! "Great Man"
Thanks! Helps alot on my CSS building. A great and quick reference!
Hey there,
first of all thanks a lot for this grt effort of yours and secondly could u do such a thing for actionscript as well?
Once again, thx a lot & keep up the gud work! :)
Great - Many thanks - very useful
Thanks You for this helpful papers. I 'll print them out, put them right now into an image frame and glue them on the wall - visible for every one here ;-)
As you can see from my site I have some css issues but I'm working on it. your 'cheat sheet' really opened my eyes about some syntax issues i've had, particularly with use of # and div IDs which I am new to.... so handy! thanks
Muy Util, gracias
Can you please put word format also
Hey, I love your Cheat Sheets including this CSS one I have many a time forgotten a simple function that I have been able to find quickly using your cheat sheets, I must say these are the best free cheat sheets I could find.
Cool. Finally an excuse to buy a laminator.
Very useful.
Sai Narasimha Reddy, India
Unknown #163: November 20, 2007
Thanx man. It's quite helpful to me.
 Bosnia And Herzegovina #164: November 20, 2007
Nice and easy. many thnx.
Thanks man. Very very helpful!
Brian Knoll
United States #166: December 4, 2007
Jeff, this is wonderfully helpful! I've been looking for exactly this thing -- something will all the possibilities on one quick ref sheet. Also, the live comment preview is very cool -- neat to see your comments updated as you make them -- how do you do that? brianeknoll@gmail.com
This is just was i needed. Great work.
Hi,

nice work. However you missed very cool thing - include statements:

@import url("cssfile.css");

Very useful, enables me to use multiple css files that give me another structuring flexibility.

For main stylesheet, exemplary:
@import url("_reset.css");
@import url("_mainstyles.css");
@import url("_debug.css");

And everything clear.
Thanks Dave,
I've been looking around for simple "cheat sheets" that have CSS and HTML codes, but are not wordy. Being afflicted with "sometimers" disease, I usually need a quick "reminder" glimpse to narrow down the tags/commands I want to use.

Now if I can just remember where I put the list!

Gus
Wow, that's what i have searched for. Thank you very much!
Develoweb
Peru #171: February 12, 2008
Excellent, thanks a lot!
baliwebdesigner
Australia #172: February 18, 2008
cool no need to google it each time i need it.
Very nice cheatsheet, good as always!
it's awesome, use it everyday... thanks
Fred T
United States #175: March 3, 2008
Hi Dave,

As I've already commented, I think your cheat sheets are great... I'm a bit of an amateur, so apologies in advance if this sounds silly,,, BUT, in a previous comment I posted the real URL of my home page.

It seems that since that time, I'm getting a request from http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ looking for a favicon file.

It's distorting my log files since it seems that I have hundreds of referrals coming from this page looking for my favicon. :-) - I've set up my .htaccess to return a 403 now, (using your mod rewrite cheat sheet), but I was wondering why this might be happening, and whether it could be stopped.

If you have an address that I can contact you directly I will, otherwise, maybe I'll just see if you follow up to this comment.

Anyway, great cheat sheets... They helped me learn a lot!!
Hi Fred,

The site uses your favicon next to your comments. I can remove that from your comments if you like though?
Thank you! I would love it if it showed some more shortcuts--like I know there's a way for do padding left,right,up,down (or something), which aren't shown here. Also the values for background-repeat aren't shown (repeat-x, etc.). Thanks!
This is simply great. Thanks
I like this cheat seet a lot! Thank you very much for this great post.
Rakel
Belgium #180: April 9, 2008
Hi Dave
Sorry if I'm wrong. But did you steal these cheat sheets from elsewhere? I've seen a few of them elsewhere (without your site's url)
I find it suspicious that there's so little consistency in the designs of your sheets. (especially since they're about webdesign.)
Hi Rakel. I did think about just not bothering to respond, as your comment seemed just like trolling. However, on the off chance you're asking a genuine question ...

No, they're not stolen from elsewhere. All of the cheat sheets hosted on the site are my own work, in some cases with the help of other people (for example, the Ruby on Rails cheat sheet - Amy Hoy and DHH helped me with the content, as I'm not a RoR expert), and they are fully credited for their work.

The cheat sheets have been copied on a fairly large scale. They are free to use and redistribute, under a creative commons license. However, many of the people that copy them do so while removing the original credit.

As for consistency ... I thought they were consistent! They're all (except the colour chart, which I did a couple of years before the language cheat sheets) 2 or 3 columns, styled in similar ways. Some have sidebars (e.g., where I've added function lists). Some have double-wide sections where code examples are needed. But all the blocks are pretty much identical.

I've not released a new one in a while, but do have sme interesting bits and pieces in the pipeline. Perhaps more activity here and new cheat sheets will help reassure you that this is the original source for these cheat sheets!
And to everyone else who said thanks above, you are very welcome! I've done really poorly recently at responding to comments (and posting new content) but have not forgotten about this site. I have had a slight motivational crisis, and a couple of other projects on the go, but normal service will be returned soon.
WildMelody
United States #183: April 16, 2008
This is amazing! The cheat sheet actually confuses me, but that's because I first read CSS tutorials yesterday... :) What is amazing is the comments you receive from ALL over the world. How exciting!
 United States #184: April 18, 2008
As a beginer, I do not have much to add except my thanks for a very helpful tool.
Lynbird
United States #185: April 20, 2008
Thanks for the Cheat Sheet.As a beginner I need all the help I can get.
Ummm this totally saves my effin arse!

Noob here, but thank you for this info.
'Twould be nice if things like border were listed in the same order that they go if they are all in one declaration.
I.e. border would be 'ordered' as size, styles, color.
Hi Daniel,

All the cheat sheets are good, but all the pdf's and images has got only first page of it, can you please provide other pages too.

And please post the Some .NET Cheat Sheet, if you have any.

I would like to share one provided by microsoft through my blog

http://www.dotnetglobe.com/2008/05/net-framework-35-namespaces-poster.html
Mike
Unknown #189: May 20, 2008
Just wanted to confirm I have the smae problem as Brij Mohan - only first page
Scherbe
Ol, north germany #190: May 21, 2008
Hi Dave,

thanks for a nice stylesheet cheat.

Great, that not everyone´s god is money, so you give your work for free.

Wish you luck with all further projects, even commercial. :)

Greetz
Mike
Unknown #191: May 21, 2008
Ok, now that I've LOOKED at the cheat sheet I understand it is in fact only ONE page... the highlights in your thumbnails in your story above weren't obvious to me.
Hi Dave.
Looks like google's page rank whacked you.
Sorry to see this dave. keep up the bloggin.
@Mike: Sorry about that. Given the number of people that are given the impression there's more than one page, I think it's probably about time I improved this page to ensure there is no ambiguity!
thank you man
very useful sheet
Hello Dave,

A fantastic resource for (french) webmasters, thanks.
I'd be interested in knowing what tool you used to write your cheatsheets with, as they're very high quality. I want to write my own cheatsheet at the moment (as a way of learning an environment). Of course I'll post it under an Open Document license :-) Thanks, Sonia.
Hi Sonia,

I use a vector graphics program called Xara Xtreme, available from www.xara.com. Been using it for design for years, so it just made sense for me to use it for the cheat sheets, though looking back now I don't know that it was the best choice!
thank you wery much...
Its a really very useful article, most of your cheat sheets are on my desk.

Please post some in Microsoft.NET or C#, it will be really useful.
Stefan
Unknown #200: June 30, 2008
This site also has a bunch of useful cheat sheets:

<a href='http://www.aidsheet.com' title='link to aidsheet.com'>cheat sheets</a>
Stefan
Unknown #201: June 30, 2008
It looks like the blog does not like html. The site is www.aidsheet.com
foxyBrown
Sweden #202: August 28, 2008
Can any one help me? Just started css and need to know the code for building a box with four inside boxes with the colors red and green.
Thanks, this one's going to be on the side of my desk!
Sudhakar. D
India #205: February 3, 2009
It's marvelous work. Thanks.
Wow, what a thing to put together! I'm so happy I found this site, this really helps speed things up.
I'm a web designer but sometimes I get a bit confused trying to get my CSS to work right. This cheat sheet has been very helpful. Thanks and keep it up!!!
Thanks for this article.I think that I see some things more clearly.

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

 United States #209: 1 minute ago