Css help sheet 02


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css help sheet 02

  1. 1. GoSquared CSS Help Sheet Syntax This Needs a Diagram Shorthand Syntax height height; width; background selector {property: value;} margin-top; border External Style Sheet margin-right; border-bottom width margin-bottom; border-left <link rel=”stylesheet” type=”text/css” margin-left; border-right href=”style.css” /> padding-top; border-top Internal Style padding-right; font <style type=”text/css”> border padding-bottom; list-style selector {property: value} margin padding padding-left; margin </style> padding Inline Style Border Comments <tag style=”property: value”> border-width Width of the border /* Comments */ border-style dashed; dotted; double; groove; inset; Pseudo General outset; ridge; solid; none; Selectors class String preceded by a full stop [.] border-color Colour of the border :hover ID String preceded by a hash [#] :active Position :focus div Formats structure or block of text clear If any oating elements around the element :link span Inline formatting both, left, right, none :visited color Foreground colour : rst-line oat Floats to a speci ed side cursor Appearance of the cursor : rst-letter left, right, none display block; inline; list-item; none left The left position of an element Media Types over ow How to handle content that auto, length values [pt, in, cm, px] all over ows its box. top The top position of an element braille visible, hidden, scroll, auto auto, length values [pt, in, cm, px] embossed visibility visible, hidden position static, relative, absolute handheld print z-index Above or below overlapping elements projection Font auto, integer [higher numbers on top] screen font-style italic, normal speech font- normal, small-caps Background tty variant background-color Colour of background tv font- bold, normal, lighter, bolder, background-image Background image Units weight integer [100-900] background-repeat repeat, no-repeat, repeat-x, repeat-y Length font-size Size of the font background- Background image scrolls with element % attachment scroll, xed em font-family Speci c font[s] to be used. pt background- (x y), top, center, bottom, left, right px Text position Keywords letter-spacing Space between letters bolder line-height Vertical space between baselines List lighter list-style- Type of bullet or numbering in the list larger text-align Horizontal alignment text- blink, line-through, none, type disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none Please note that decoration overline, underline developing CSS list-style- Position of the bullet or number in a list text-indent First line indentation to work with IE6 position inside; outside text- capitalise, lowercase, uppercase is a lost cause. transform list-style- Image to be used as the bullet in the list Spread the word: image encourage your vertical-align Vertical alignment word-spacing Spacing between words users to give up on IE 6 (unchanged since 2001.) Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall © 2008 Go Squared Ltd.