CSS2 - Quick Reference Cheat Sheet

Quick Reference Cheat Sheet for CSS2

Transcript

1. © 2010 Go Squared Ltd. Shorthand Shorthand Comments Comments Pseudo Selectors Pseudo Selectors Media Types Media Types Units Units Font Font Text Text List List Background Background Position Position Border Border Margins + Padding Margins + Padding Syntax Syntax GoSquared GoSquared Download this Help Sheet now at gosquared.com/liquidicity Put it on your wall Original 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 */ all braille embossed handheld print projection screen speech tty tv Keywords % em pt px bolder lighter larger :hover :active :focus :link :visited : rst-line : rst-letter font-size Size of the font font-family Speci c font[s] to be used. letter-spacing Space between letters line-height Vertical space between baselines text-align Horizontal alignment text- decoration text-indent First line indentation text- transform vertical-align Vertical alignment word-spacing Spacing between words width height padding margin border 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 element both, left, right, none oat Floats to a speci ed side left, right, none left The left position of an element auto, length values [pt, in, cm, px] top The top position of an element auto, length values [pt, in, cm, px] z-index Above or below overlapping elements auto, integer [higher numbers on top] position static, relative, absolute background-color Colour of background background-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 element scroll, xed list-style- type Type of bullet or numbering in the list disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none list-style- position Position of the bullet or number in a list inside; outside list-style- image Image to be used as the bullet in the list Developing for IE6 is a lost cause. General General class 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 that over ows its box. visible; hidden; scroll; auto visible; hidden block; inline; list-item; none CSS Help Sheet CSS Help Sheet background border border-bottom border-left border-right border-top font list-style margin padding font-style italic, normal font-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