12/11/2019 CSS2 Cheat Sheet by DaveChild - Download free from Cheatography - Cheatography.

com: Cheat Sheets For Every…

 Download This Cheat Sheet (PDF)  14 Comments Rating:      (85) 

e.g., Regular Expressions, Garden, Kitchen, Audio     

 Home  Cheat Sheets  Create  Community  Help LOGIN  or  REGISTER

CSS2 Cheat Sheet by DaveChild

A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.
 css      webdesign      web      design      frontend

CSS2 Selectors   CSS2 Box Model   CSS2 Boxes

* All elements margin border-color

div <div> margin-top border-top-color

div * All elements within <div> margin-right border-right-color

div span <span> within <div> margin-bottom border-bottom-color

div, span <div> and <span> margin-left border-left-color

div > span <span> with parent <div> padding border-style

div + span <span> preceded by <div> padding-top border-top-style

.class Elements of class "class" padding-right border-right-style

div.class <div> of class "class" padding-bottom border-bottom-style

#itemid Element with id "itemid" padding-left border-left-style

div#itemid <div> with id "itemid" border border-width

CSS2 Positioning
a[attr] <a> with attribute "attr" border-top border-top-width

a[attr='x'] <a> when "attr" is "x" display clear border-bottom border-right-width

a[clas- <a> when class is a list containing position z-index border-right border-bottom-width
s~='x'] 'x' top direction border-left border-left-width
a[lang|='en'] <a> when lang begins "en" right unicode-bidi

bottom overflow CSS2 Tables

CSS2 Pseudo Selectors and Pseudo Classes
left clip caption-side border-spacing
:first-child First child element table-layout empty-cells
float visibility
:first-line First line of element border-collapse speak-header
:first-letter First letter of element CSS2 Dimensions

:hover Element with mouse over width min-height CSS2 Paging

:active Active element min-width max-height size page-break-inside

:focus Element with focus max-width vertical-align marks page

:link Unvisited links height page-break-before orphans

:visited Visited links page-break-after widows

CSS2 Colour and Background
:lang(var) Element with language "var"
color background-repeat CSS2 Interface
:before Before element

:after After element background background-image cursor outline-style

background-color background-position outline outline-color

background-attachment outline-width

CSS2 Text CSS2 Aural

text-indent word-spacing volume elevation

text-align text-transform speak speech-rate

text-decoration white-space pause voice-family

text-shadow line-height pause-before pitch

letter-spacing pause-after pitch-range

cue stress

cue-before richness

cue-after speak-punctuation 
Think you can make a better cheat sheet?
play-during speak-numeral
Please login or register to make your own!
azimuth

https://www.cheatography.com/davechild/cheat-sheets/css2/ 1/5
12/11/2019 CSS2 Cheat Sheet by DaveChild - Download free from Cheatography - Cheatography.com: Cheat Sheets For Every…

CSS2 SizesThis Cheat Sheet (PDF)

Download CSS2 Fonts CSS2
 14 MiscellaneousRating:      (85)
Comments 

0 0 requires no unit font font-weight content list-style-type

Relative Sizes font-family font-stretch quotes list-style-image

em 1em equal to font size of parent (same as font-style font-size counter-reset list-style-position
100%) font-variant font-size-adjust counter-increment marker-offset
ex Height of lower case "x" list-style
% 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,- Value of each of red, green, and blue.

25,50) 0 to 255, may be swapped for percen-
tages.

How's Your Readability?

Cheatography is sponsored by Readable.com. Check out Readable.com to make your content and
copy more engaging and support Cheatography!

Measure Your Readability Now!

Download the CSS2 Cheat Sheet Share This Cheat Sheet!

PDF (recommended)

 PDF (2 pages)

Alternative Downloads

 PDF (black and white)

 LaTeX

2 Pages

Comments Cheatographer
Darren Slatten, 20:47 5 Dec 11 DaveChild
www.getpostcookie.com

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.

Think you can make a better cheat sheet?
Incredible website, BTW. I love the concept, and the design is simple-yet-effective. :)
Please login or register to make your own!
Metadata
https://www.cheatography.com/davechild/cheat-sheets/css2/ 2/5
12/11/2019 CSS2 Cheat Sheet by DaveChild - Download free from Cheatography - Cheatography.com: Cheat Sheets For Every…

 Download This Cheat Sheet (PDF)  14 Comments

Languages: English Rating:      (85) 
-Darren
Published: 19th October, 2011

Rated: 5 stars based on 85 ratings

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 Favourited By

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 and 98 more ...
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


Think you can make a better cheat sheet?
Great CS. Thanks a lot! :)
Please login or register to make your own!

https://www.cheatography.com/davechild/cheat-sheets/css2/ 3/5
12/11/2019 CSS2 Cheat Sheet by DaveChild - Download free from Cheatography - Cheatography.com: Cheat Sheets For Every…

 Download This Cheat

mwmoriarty Sheet
, 19:28 (PDF)
6 Aug 16  14 Comments Rating:      (85) 

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
Your Comment

Your Name

Your Email Address

Your Comment

Post Your Comment

Related Cheat Sheets



SEO Tools collection [Technical SEO

HTML4 Cheat Sheet edition] Cheat Sheet

More Cheat Sheets by DaveChild

  


Think you can make a better cheat sheet?
Please login or register to make your own!
Regular Expressions Cheat Sheet Linux Command Line Cheat Sheet mod rewrite Cheat Sheet
https://www.cheatography.com/davechild/cheat-sheets/css2/ 4/5
12/11/2019 CSS2 Cheat Sheet by DaveChild - Download free from Cheatography - Cheatography.com: Cheat Sheets For Every…
Regular Expressions Cheat Sheet Linux Command Line Cheat Sheet mod_rewrite Cheat Sheet
 Download This Cheat Sheet (PDF)  14 Comments Rating:      (85) 

Latest Cheat Sheet Most Popular Cheat Sheet Random Cheat Sheet


How Adults Can Train to Become a Biology Unit 3.2: Cell Processes
Teacher Cheat Sheet Regular Expressions Cheat Sheet Cheat Sheet

About Cheatography On The Blog 10th June Recent Activity

Cheatography is a collection of 3502 cheat joslynfresay published How Adults Can
5 Ways Cheatography Benefits Your Business
sheets and quick references in 25 languages for Train to Become a Teacher.
everything from science to programming! Cheatography Cheat Sheets are a great 7 hours 24 mins ago
timesaver for individuals - coders, gardeners, aparso published French.
musicians, everybody! But businesses can 1 day 16 hours ago
benefit from them as well - read on to find out
more. Heavenel updated ds.
1 day 17 hours ago

Behind the Scenes Cheatography RSS Feeds Share Cheatography!

If you have any problems, or just want to say hi, 3.3K
Latest Cheat Sheets
you can find us right here:
Latest Blog Posts

DaveChild SpaceDuck

Cheatography

© 2011 - 2019 Cheatography.com   |   CC License   |   Terms   |   Privacy Site by Added Bytes


Think you can make a better cheat sheet?
Please login or register to make your own!

https://www.cheatography.com/davechild/cheat-sheets/css2/ 5/5