or   Register or Register today to make and share your own cheat sheets! (Why Join?)

Cheatography Login

Join Us!

Not a Cheatographer? Register here!

Social Media

You can login to or register with Cheatography using your Facebook or Twitter account!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

CSS2 Cheat Sheet by DaveChild

7 Comments   |   Add a Comment   |   PDF Download   |   Find:

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
Pinterest

Favourited by 56 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 ifdattic

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

Add a Comment

Comment:

Contents

A quick reference guide for CSS, listing selector syntax, proper­ties, units and other useful bits of inform­ation.

Column Content Comments Author Updated
- CSS2 Cheat Sheet DaveChild 6 Dec 11
1 CSS2 Selectors 0 DaveChild 10 Oct 11
CSS2 Pseudo Selectors and Pseudo Classes 0 DaveChild 10 Oct 11
CSS2 Sizes 0 DaveChild 22 Oct 11
CSS2 Colours 0 DaveChild 10 Oct 11
2 CSS2 Box Model 0 DaveChild 10 Oct 11
CSS2 Positioning 0 DaveChild 10 Oct 11
CSS2 Dimensions 0 DaveChild 10 Oct 11
CSS2 Colour and Background 0 DaveChild 10 Oct 11
CSS2 Text 0 DaveChild 10 Oct 11
CSS2 Fonts 0 DaveChild 10 Oct 11
3 CSS2 Boxes 0 DaveChild 10 Oct 11
CSS2 Tables 0 DaveChild 10 Oct 11
CSS2 Paging 0 DaveChild 10 Oct 11
CSS2 Interface 0 DaveChild 10 Oct 11
CSS2 Aural 0 DaveChild 10 Oct 11
CSS2 Miscellaneous 0 DaveChild 10 Oct 11

Cheatographer

DaveChild DaveChild
www.addedbytes.com

More by DaveChild

Cheat Sheet Stats

18,415 Downloads and 15,528 Views

Tags

css, design, frontend, web, webdesign

Related (shares tags with):

Thumbnail