© 2008 Go Squared Ltd.

CSS Help SheetCSS Help SheetGoSquaredGoSquared

Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall

SyntaxSyntax

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

This Needs a Diagram Shorthand

CommentsBorder

height; width;margin-top;margin-right;margin-bottom;margin-left;padding-top;padding-right;padding-bottom;padding-left;

backgroundborderborder-bottomborder-leftborder-rightborder-topfontlist-stylemarginpadding

/* Comments */

Media Typesallbrailleembossedhandheldprintprojectionscreenspeechttytv

UnitsLength%emptpxKeywordsbolderlighterlarger

PseudoSelectors

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

Generalclass String preceded by a full stop [.]ID String preceded by a hash [#]div Formats structure or block of textspan Inline formattingcolor Foreground colourcursor Appearance of the cursor

over�ow How to handle content thatover�ows its box.visible, hidden, scroll, auto

visibility visible, hidden

display block; inline; list-item; none

Fontfont-style italic, normal

font-size Size of the font

font-family Speci�c font[s] to be used.

font-variant

normal, small-caps

font-weight

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

Textletter-spacing Space between lettersline-height Vertical space between baselinestext-align Horizontal alignmenttext-decoration

blink, line-through, none, overline, underline

text-indent First line indentationtext-transform

capitalise, lowercase, uppercase

vertical-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;

Positionclear If any �oating elements around the element

both, 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

Backgroundbackground-color Colour of backgroundbackground-image Background imagebackground-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

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

Please note thatdeveloping CSSto work with IE6is a lost cause.Spread the word:encourage yourusers to give up onIE 6 (unchanged since 2001.)