Skip Navigation

Find cheat sheets for every topic, or make your own to share with your friends.

All Added Bytes cheat sheets are available free at Cheatography!

Visit Cheatography »

CSS Cheat Sheet (V2)

The second version of the CSS Cheat Sheet, a quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.
CSS Cheat Sheet Version 2

Get It Today!

Including:
  - CSS Selectors and Pseudo-Selectors
  - CSS Properties
  - CSS Units
  - CSS Box Model

Buy Now for just $2!

Overview

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.

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 Version 2

Get It Today!

Including:
  - CSS Selectors and Pseudo-Selectors
  - CSS Properties
  - CSS Units
  - CSS Box Model

Buy Now for just $2!

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