https://cheatography.com:443///davechild/cheat-sheets/css2/

CSS2 Selectors

*	All elements
div	<div>
div *	All elements within <div>
div span	<span> within <div>
div, span	<div> and <span>
div > span	<span> with parent <div>
div + span	<span> preceded by <div>
.class	Elements of class "class"
div.class	<div> of class "class"
#itemid	Element with id "itemid"
div#itemid	<div> with id "itemid"
a[attr]	<a> with attribute "attr"
a[attr='x']	<a> when "attr" is "x"
a[class~='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	Centimeters
mm	Millimeters
in	Inches
pt	1pt = 1/72in
pc	1pc = 12pt

CSS2 Colours

#789abc	RGB Hex Notation
#acf	Equates to "#aaccff"
rgb(0,25,50)	Value of each of red, green, and blue. 0 to 255, may be swapped for percentages.

CSS2 Box Model

CSS2 Positioning

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

CSS2 Dimensions

width	min-height
min-width	max-height
max-width	vertical-align
height

CSS2 Colour and Background

color	background-repeat
background	background-image
background-color	background-position
background-attachment

CSS2 Text

text-indent	word-spacing
text-align	text-transform
text-decoration	white-space
text-shadow	line-height
letter-spacing

CSS2 Fonts

font	font-weight
font-family	font-stretch
font-style	font-size
font-variant	font-size-adjust

CSS2 Boxes

margin	border-color
margin-top	border-top-color
margin-right	border-right-color
margin-bottom	border-bottom-color
margin-left	border-left-color
padding	border-style
padding-top	border-top-style
padding-right	border-right-style
padding-bottom	border-bottom-style
padding-left	border-left-style
border	border-width
border-top	border-top-width
border-bottom	border-right-width
border-right	border-bottom-width
border-left	border-left-width

CSS2 Tables

caption-side	border-spacing
table-layout	empty-cells
border-collapse	speak-header

CSS2 Paging

size	page-break-inside
marks	page
page-break-before	orphans
page-break-after	widows

CSS2 Interface

cursor	outline-style
outline	outline-color
outline-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-punctuation
play-during	speak-numeral
azimuth

CSS2 Miscellaneous

content	list-style-type
quotes	list-style-image
counter-reset	list-style-position
counter-increment	marker-offset
list-style

Created By

DaveChild
https://aloneonahill.com

Metadata

Languages: English

Published: 19th October, 2011
Last Updated: 25th February, 2020
Rated: 5 out of 5 stars based on 93 ratings

Favourited By

and 113 more ...

Comments

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, 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, 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 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 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 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 14:37 21 Dec 12

Thank ! very good ..

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 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 08:57 14 Feb 14

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

John Grant 09:04 6 Apr 15

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

Rob 13:30 24 Feb 16

Great CS. Thanks a lot! :)

mwmoriarty, 19:28 6 Aug 16

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...

MichaelTheGamer, 02:47 29 Sep 18

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

Related Cheat Sheets

HTML4 Cheat Sheet

SEO Tools collection [Technical SEO edition] Cheat Sheet

More Cheat Sheets by DaveChild

Regular Expressions Cheat Sheet

Linux Command Line Cheat Sheet

mod_rewrite Cheat Sheet