Show Menu

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 Positioning

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 Miscellaneous

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
 

Share This Cheat Sheet!

Favourited by 65 Members:

michaelfox nschurdell danh chris5marsh wattslevi catspaw82 CITguy CyberTron neenthewiser Kiwidk DaveChild SamCollett cjvalotta arnoldobr anomalophobe senseful lawvol Icel brentscheidt shikee GaBBBBB SubCat7564 jdmyers Wbbourne xcession hqm desert_jay mishin Rober1992 fedesilva maintainweb Bertrand vicpf donnedslug zeroeth rd5coding janslow henrikcederblad SoulReverie metamad pneumatix crss1138 onitek kjhughes MHM5000 dttk pedromarban petraeus avalitan manjuv.gmit asafge MrOggy85 Epoc akipta rbatllet alexikia PaulBlp Coldblackice Swahilikid gmickd csavio mrlaziz GarthZares ThibaultGomarin clazito

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.