Show Menu

CSS2 Cheat Sheet by DaveChild

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>
.classElements of class "­cla­ss"
div.class<di­v> of class "­cla­ss"
#itemidElement 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­-childFirst child element
:first­-lineFirst line of element
:first­-letterFirst letter of element
:hoverElement with mouse over
:activeActive element
:focusElement with focus
:linkUnvisited links
:visitedVisited links
:lang(var)Element with language "­var­"
:beforeBefore element
:afterAfter element

CSS2 Sizes

00 requires no unit
Relative Sizes
em1em equal to font size of parent (same as 100%)
exHeight of lower case "­x"
%Percentage
Absolute Sizes
pxPixels
cmCentim­eters
mmMillim­eters
inInches
pt1pt = 1/72in
pc1pc = 12pt

CSS2 Colours

#789abcRGB Hex Notation
#acfEquates 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 Positioning

displayclear
positionz-index
topdirection
rightunicod­e-bidi
bottomoverflow
leftclip
floatvisibility

CSS2 Dimensions

widthmin-height
min-widthmax-height
max-widthvertic­al-­align
height

CSS2 Colour and Background

colorbackgr­oun­d-r­epeat
backgroundbackgr­oun­d-image
backgr­oun­d-colorbackgr­oun­d-p­osition
backgr­oun­d-a­tta­chment

CSS2 Text

text-i­ndentword-s­pacing
text-aligntext-t­ran­sform
text-d­eco­rationwhite-­space
text-s­hadowline-h­eight
letter­-sp­acing

CSS2 Fonts

fontfont-w­eight
font-f­amilyfont-s­tretch
font-stylefont-size
font-v­ariantfont-s­ize­-adjust
 

CSS2 Boxes

marginborder­-color
margin-topborder­-to­p-color
margin­-rightborder­-ri­ght­-color
margin­-bottomborder­-bo­tto­m-color
margin­-leftborder­-le­ft-­color
paddingborder­-style
paddin­g-topborder­-to­p-style
paddin­g-rightborder­-ri­ght­-style
paddin­g-b­ottomborder­-bo­tto­m-style
paddin­g-leftborder­-le­ft-­style
borderborder­-width
border-topborder­-to­p-width
border­-bottomborder­-ri­ght­-width
border­-rightborder­-bo­tto­m-width
border­-leftborder­-le­ft-­width

CSS2 Tables

captio­n-sideborder­-sp­acing
table-­layoutempty-­cells
border­-co­llapsespeak-­header

CSS2 Paging

sizepage-b­rea­k-i­nside
markspage
page-b­rea­k-b­eforeorphans
page-b­rea­k-afterwidows

CSS2 Interface

cursoroutlin­e-style
outlineoutlin­e-color
outlin­e-width

CSS2 Aural

volumeelevation
speakspeech­-rate
pausevoice-­family
pause-­beforepitch
pause-­afterpitch-­range
cuestress
cue-beforerichness
cue-afterspeak-­pun­ctu­ation
play-d­uringspeak-­numeral
azimuth

CSS2 Miscellaneous

contentlist-s­tyl­e-type
quoteslist-s­tyl­e-image
counte­r-resetlist-s­tyl­e-p­osition
counte­r-i­ncr­ementmarker­-offset
list-style
 

Share This Cheat Sheet!

Favourited by 67 Members:

chi-zach twbcs clazito ThibaultGomarin GarthZares mrlaziz csavio gmickd Swahilikid Coldblackice PaulBlp and 57 more ...

Comments

Darren Slatten Darren Slatten, 20:47 5 Dec 11

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 :)

Leo Merkel Leo Merkel, 07:47 10 Feb 12

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!

Maik Maik, 07:37 17 Feb 12

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.

Christian Zumbrunnen Christian Zumbrunnen, 14:02 21 May 12

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

lamin lamin, 14:37 21 Dec 12

Thank ! very good ..

Pieter Pieter, 10:21 20 May 13

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!

Justin Justin, 15:13 13 Feb 14

In CSS2 - Boxes, the following is backwards:

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

Cheers

Joey Joey, 08:57 14 Feb 14

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

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.