Skip Navigation

CSS Cheat Sheet (V2)

Posted 7 days ago 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 7 days ago in Cheat Sheets and has not been tagged yet.

7 comments

Keep up to date with this discussion with RSS or Atom.
thank you very much...
thank you....
Dave Child
United Kingdom #3: 4 days ago
You're both welcome :)
maylynn55
United States #4: 3 days ago
Thank you very much, this is very nice of you!
Celeste
United Kingdom #5: Yesterday
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: Yesterday
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.
Dave Child
United Kingdom #7: Yesterday
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.

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