CSS 2.1 Help Cheat Sheet

Download CSS 2.1 Help Cheat Sheet

Post on 27-Apr-2015




0 download

Embed Size (px)


We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought wed make a Help Sheet that didnt hurt the eyes of anyone who tried to use it. The past year, weve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.Weve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.http://www.gosquared.com/liquidicity/archives/1010


GoSquaredSyntaxWrite styles for any elementselector {property: value;}

CSS Help Sheet

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

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

External Style Sheet

Internal Style selector {property: value} border margin padding

Inline Style

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

Comments/* Comments */Pseudo Selectors

Generalclass 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

Positionclear 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 Typesall braille embossed handheld print projection screen speech tty tv


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

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

UnitsLength % em pt px Keywords bolder lighter largerDeveloping for IE6 is a lost cause.

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

Listlist-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/liquidicityOriginal by the awesome Leslie Frank: http://lesliefranke.com/2005/10/css-cheat-sheet/

2010 Go Squared Ltd.

Put it on your wall


View more >