Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css help sheet 02

287 views

Published on

  • Be the first to comment

  • Be the first to like this

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.

×