Write styles for any element
selector {property: value;}

CSS Help Sheet

Margins + Padding
height width height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;

background border border-bottom border-left border-right border-top font list-style margin padding

External Style Sheet
<link rel=”stylesheet” type=”text/css” href=”style.css” />

Internal Style
<style type=”text/css”> selector {property: value} </style> border margin padding

Inline Style
<tag style=”property: value”>

border-width Width of the border border-style dashed; dotted; double; groove; inset; outset; ridge; solid; none; border-color Colour of the border

/* Comments */
Pseudo Selectors

class ID div span color cursor display over ow String preceded by a full stop (.) String preceded by a hash (#) Formats structure or block of text Inline formatting Foreground colour Appearance of the cursor block; inline; list-item; none How to handle content that over ows its box. visible; hidden; scroll; auto visible; hidden

clear oat left top position z-index If any oating elements around the element both, left, right, none Floats to a speci ed side left, right, none The left position of an element auto, length values [pt, in, cm, px] The top position of an element auto, length values [pt, in, cm, px] static, relative, absolute Above or below overlapping elements auto, integer [higher numbers on top]

:hover :active :focus :link :visited : rst-line : rst-letter

Media Types
all braille embossed handheld print projection screen speech tty tv


font-style font-variant font-weight font-size font-family italic, normal normal, small-caps bold, normal, lighter, bolder, integer [100-900] Size of the font Speci c font[s] to be used.

background-color Colour of background background-image Background image url(’’) background-repeat repeat, no-repeat, repeat-x, repeat-y backgroundBackground image scrolls with element attachment scroll, xed background(x y), top, center, bottom, left, right position

Length % em pt px Keywords bolder lighter larger
Developing for IE6 is a lost cause.

letter-spacing Space between letters line-height Vertical space between baselines text-align textdecoration text-indent Horizontal alignment blink, line-through, none, overline, underline First line indentation

list-styletype list-styleposition list-styleimage Type of bullet or numbering in the list disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none Position of the bullet or number in a list inside; outside Image to be used as the bullet in the list

textcapitalise, lowercase, uppercase transform vertical-align Vertical alignment word-spacing Spacing between words

Download this Help Sheet now at gosquared.com/liquidicity
Original by the awesome Leslie Frank: http://lesliefranke.com/2005/10/css-cheat-sheet/

© 2010 Go Squared Ltd.

Put it on your wall

Sign up to vote on this title
UsefulNot useful