A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.
|
*
|
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"
|
|
: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
|
|
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
|
|
#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.
|
|
display
|
clear
|
|
position
|
z-index
|
|
top
|
direction
|
|
right
|
unicode-bidi
|
|
bottom
|
overflow
|
|
left
|
clip
|
|
float
|
visibility
|
|
width
|
min-height
|
|
min-width
|
max-height
|
|
max-width
|
vertical-align
|
|
height
|
|
|
color
|
background-repeat
|
|
background
|
background-image
|
|
background-color
|
background-position
|
|
background-attachment
|
|
|
text-indent
|
word-spacing
|
|
text-align
|
text-transform
|
|
text-decoration
|
white-space
|
|
text-shadow
|
line-height
|
|
letter-spacing
|
|
|
font
|
font-weight
|
|
font-family
|
font-stretch
|
|
font-style
|
font-size
|
|
font-variant
|
font-size-adjust
|
|
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
|
|
caption-side
|
border-spacing
|
|
table-layout
|
empty-cells
|
|
border-collapse
|
speak-header
|
|
size
|
page-break-inside
|
|
marks
|
page
|
|
page-break-before
|
orphans
|
|
page-break-after
|
widows
|
|
cursor
|
outline-style
|
|
outline
|
outline-color
|
|
outline-width
|
|
|
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
|
|
|
content
|
list-style-type
|
|
quotes
|
list-style-image
|
|
counter-reset
|
list-style-position
|
|
counter-increment
|
marker-offset
|
|
list-style
|
|
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
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...
Great CS. Thanks a lot! :)
Apart from the pdf problem this is a VERY handy resource for beginners, I'll be sharing this to aid with my students. Thankyou!
Thanks for providing this. There is a problem with the PDF prints on 2 pages instead of 1.
In CSS2 - Boxes, the following is backwards: borderÂ-bottom borderÂ-riÂghtÂ-width borderÂ-right borderÂ-boÂttoÂm-width Cheers
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!
Thank ! very good ..
Same problem here with the pdf. Can't get it on one page, which makes it very print-unfriendly.
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.
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!
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
Thanks Darren, both for the compliment and for letting me know about the soft hyphen issue. I'll get that fixed now.
Ok, seems a bit better now. Soft hyphens don't play very nicely with HTML tags and entities :)
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
