© 2010 Go Squared Ltd.

ShorthandShorthand

CommentsComments

Pseudo SelectorsPseudo Selectors

Media TypesMedia Types

UnitsUnits

FontFont

TextText

ListList

BackgroundBackground

PositionPosition

BorderBorder

Margins + PaddingMargins + PaddingSyntaxSyntax

GoSquaredGoSquared

Download this Help Sheet now at gosquared.com/liquidicity

Put it on your wallOriginal by the awesome Leslie Frank: http://lesliefranke.com/2005/10/css-cheat-sheet/

Write styles for any element

External Style Sheet

Internal Style

Inline Style

selector {property: value;}

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

<style type=”text/css”>selector {property: value}</style>

<tag style=”property: value”> /* Comments */

allbrailleembossedhandheldprintprojectionscreenspeechttytv

Keywords

%emptpx

bolderlighterlarger

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

font-size Size of the fontfont-family Speci!c font[s] to be used.

letter-spacing Space between lettersline-height Vertical space between baselinestext-align Horizontal alignmenttext-decorationtext-indent First line indentationtext-transformvertical-align Vertical alignmentword-spacing Spacing between words

width

height

paddingmarginborder

border-width Width of the border

border-color Colour of the border

border-style dashed; dotted; double; groove; inset;outset; ridge; solid; none;

clear If any "oating elements around the elementboth, left, right, none

!oat Floats to a speci!ed sideleft, right, none

left The left position of an elementauto, length values [pt, in, cm, px]

top The top position of an elementauto, length values [pt, in, cm, px]

z-index Above or below overlapping elementsauto, integer [higher numbers on top]

position static, relative, absolute

background-color Colour of backgroundbackground-image Background image url(’’)

background-repeat repeat, no-repeat, repeat-x, repeat-y

background-position

(x y), top, center, bottom, left, right

background-attachment

Background image scrolls with elementscroll, !xed

list-style-type

Type of bullet or numbering in the listdisc; circle; square; decimal; lower-roman;upper-roman; lower-alpha; upper-alpha; none

list-style-position

Position of the bullet or number in a listinside; outside

list-style-image

Image to be used as the bullet in the list

Developing forIE6 is a lost cause.

GeneralGeneralclass

ID

div

span

color

cursor

over!ow

visibility

display

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

How to handle content thatover"ows its box.visible; hidden; scroll; autovisible; hidden

block; inline; list-item; none

CSS Help SheetCSS Help Sheet

backgroundborderborder-bottomborder-leftborder-rightborder-topfontlist-stylemarginpadding

font-style italic, normalfont-variant normal, small-caps

font-weight bold, normal, lighter, bolder, integer [100-900]

blink, line-through, none, overline, underline

capitalise, lowercase, uppercase

height; width;

padding-top;padding-right;padding-bottom;padding-left;

margin-top;margin-right;margin-bottom;margin-left;

Length