Show Menu
Cheatography

A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.

CSS2 Selectors

*
All elements
div
<di­v>
div *
All elements within <di­v>
div span
<sp­an> within <di­v>
div, span
<di­v> and <sp­an>
div > span
<sp­an> with parent <di­v>
div + span
<sp­an> preceded by <di­v>
.class
Elements of class "­cla­ss"
div.class
<di­v> of class "­cla­ss"
#itemid
Element with id "­ite­mid­"
div#itemid
<di­v> with id "­ite­mid­"
a[attr]
<a> with attribute "­att­r"
a[attr­='x']
<a> when "­att­r" is "­x"
a[clas­s~='x']
<a> when class is a list containing 'x'
a[lang­|='en']
<a> when lang begins "­en"

CSS2 Pseudo Selectors and Pseudo Classes

:first­-child
First child element
:first­-line
First line of element
:first­-letter
First letter of element
:hover
Element with mouse over
:active
Active element
:focus
Element with focus
:link
Unvisited links
:visited
Visited links
:lang(var)
Element with language "­var­"
:before
Before element
:after
After element

CSS2 Sizes

0
0 requires no unit
Relative Sizes
em
1em equal to font size of parent (same as 100%)
ex
Height of lower case "­x"
%
Percentage
Absolute Sizes
px
Pixels
cm
Centim­eters
mm
Millim­eters
in
Inches
pt
1pt = 1/72in
pc
1pc = 12pt

CSS2 Colours

#789abc
RGB Hex Notation
#acf
Equates to "­#aa­ccf­f"
rgb(0,­25,50)
Value of each of red, green, and blue. 0 to 255, may be swapped for percen­tages.
 

CSS2 Box Model

CSS2 Positi­oning

display
clear
position
z-index
top
direction
right
unicod­e-bidi
bottom
overflow
left
clip
float
visibility

CSS2 Dimensions

width
min-height
min-width
max-height
max-width
vertic­al-­align
height

CSS2 Colour and Background

color
backgr­oun­d-r­epeat
background
backgr­oun­d-image
backgr­oun­d-color
backgr­oun­d-p­osition
backgr­oun­d-a­tta­chment

CSS2 Text

text-i­ndent
word-s­pacing
text-align
text-t­ran­sform
text-d­eco­ration
white-­space
text-s­hadow
line-h­eight
letter­-sp­acing

CSS2 Fonts

font
font-w­eight
font-f­amily
font-s­tretch
font-style
font-size
font-v­ariant
font-s­ize­-adjust
 

CSS2 Boxes

margin
border­-color
margin-top
border­-to­p-color
margin­-right
border­-ri­ght­-color
margin­-bottom
border­-bo­tto­m-color
margin­-left
border­-le­ft-­color
padding
border­-style
paddin­g-top
border­-to­p-style
paddin­g-right
border­-ri­ght­-style
paddin­g-b­ottom
border­-bo­tto­m-style
paddin­g-left
border­-le­ft-­style
border
border­-width
border-top
border­-to­p-width
border­-bottom
border­-ri­ght­-width
border­-right
border­-bo­tto­m-width
border­-left
border­-le­ft-­width

CSS2 Tables

captio­n-side
border­-sp­acing
table-­layout
empty-­cells
border­-co­llapse
speak-­header

CSS2 Paging

size
page-b­rea­k-i­nside
marks
page
page-b­rea­k-b­efore
orphans
page-b­rea­k-after
widows

CSS2 Interface

cursor
outlin­e-style
outline
outlin­e-color
outlin­e-width

CSS2 Aural

volume
elevation
speak
speech­-rate
pause
voice-­family
pause-­before
pitch
pause-­after
pitch-­range
cue
stress
cue-before
richness
cue-after
speak-­pun­ctu­ation
play-d­uring
speak-­numeral
azimuth

CSS2 Miscel­laneous

content
list-s­tyl­e-type
quotes
list-s­tyl­e-image
counte­r-reset
list-s­tyl­e-p­osition
counte­r-i­ncr­ement
marker­-offset
list-style
               
 

Comments

It appears as though the automatic hyphenation of line-wrapping content is causing some errors. For example, in the 8th [non-heading] row of the first column ("CSS2 Selectors"), the HTML character entity representing the second quotation mark has a soft hyphen character entity inserted into it, thus preventing the quotation mark from being rendered properly.

Incredible website, BTW. I love the concept, and the design is simple-yet-effective. :)

-Darren

DaveChild DaveChild, 20:48 5 Dec 11

Thanks Darren, both for the compliment and for letting me know about the soft hyphen issue. I'll get that fixed now.

DaveChild DaveChild, 20:56 5 Dec 11

Ok, seems a bit better now. Soft hyphens don't play very nicely with HTML tags and entities :)

Being relatively new to CSS for me it's misleading that the width-property shown in your Box Model of the CSS Cheat Sheet does not include the Padding. Am i right or wrong? But nevertheless I love what you're doing here und am returning to your site very often. So best greetings from cold Germany!

Thanks for the cheatsheet! It's very useful! Unfortunately, the PDF version seems to be broken, that is it needs two pages at the moment.

Same problem here with the pdf. Can't get it on one page, which makes it very print-unfriendly.

Thank ! very good ..

Would be nice to get a North American "letter" size version. The A4 version does not fit for all of us in Canada and the US!

In CSS2 - Boxes, the following is backwards:

border­-bottom border­-ri­ght­-width
border­-right border­-bo­tto­m-width

Cheers

Thanks for providing this. There is a problem with the PDF prints on 2 pages instead of 1.

Apart from the pdf problem this is a VERY handy resource for beginners, I'll be sharing this to aid with my students. Thankyou!

Great CS. Thanks a lot! :)

Great Cheat Sheet! I would like to see one specific to a 'Reset' following Eric Meyer's 'Reset.css' and/or 'normalize.css' by Nicolas Gallagher and Jonathan Neal. I know folks can just download and freely use those as they see fit, but a cheat sheet that exemplifies/explains some or most of the items they propose would be cool. Just a thought...

Thank you SO VERY MUCH for taking the time to make this! Shoot, just for the Selectors section alone this CS is awesome. But then you go and add MORE? I love you, man! LOL

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          HTML4 Cheat Sheet

          More Cheat Sheets by DaveChild

          Regular Expressions Cheat Sheet
          Linux Command Line Cheat Sheet
          mod_rewrite Cheat Sheet