Cheatography
https://cheatography.com
A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.
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 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
https://aloneonahill.com
Metadata
Favourited By
and 113 more ...
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
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 :)
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
Related Cheat Sheets
More Cheat Sheets by DaveChild