Css help sheet 02

Download Css help sheet 02

Post on 19-May-2015




1 download

Embed Size (px)


  • 1. GoSquared CSS Help Sheet SyntaxThis Needs a Diagram Shorthand Syntax height height; width;background selector {property: value;} margin-top; border External Style Sheetmargin-right; border-bottom width margin-bottom;border-left padding-top;border-top Internal Stylepadding-right;font padding Inline Style Border Comments border-width Width of the border /* Comments */border-style dashed; dotted; double; groove; inset; PseudoGeneraloutset; ridge; solid; none; Selectors classString preceded by a full stop [.]border-color Colour of the border :hover ID String preceded by a hash [#]:active Position:focus divFormats structure or block of textclear If any oating elements around the element:link span Inline formattingboth, left, right, none:visited colorForeground colour: rst-line oatFloats to a speci ed side cursor Appearance of the cursor : rst-letterleft, right, none displayblock; inline; list-item; noneleftThe left position of an elementMedia Types over owHow to handle content thatauto, length values [pt, in, cm, px] allover ows its box. top The top position of an element braillevisible, hidden, scroll, auto auto, length values [pt, in, cm, px] embossed visibility visible, hidden positionstatic, relative, absolute handheld printz-index Above or below overlapping elementsprojection Font auto, integer [higher numbers on top]screen font-style italic, normal speech font-normal, small-caps Backgroundtty variantbackground-color Colour of backgroundtv font-bold, normal, lighter, bolder,background-image Background imageUnits weight integer [100-900]background-repeat repeat, no-repeat, repeat-x, repeat-yLength font-sizeSize of the fontbackground-Background image scrolls with element %attachment scroll, xed em font-family Speci c font[s] to be used. ptbackground-(x y), top, center, bottom, left, right px Text position Keywords letter-spacing Space between lettersbolder line-heightVertical space between baselines Listlighterlist-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; nonePlease note that decoration overline, underline developing CSSlist-style-Position of the bullet or number in a list text-indentFirst line indentationto work with IE6position inside; outside text-capitalise, lowercase, uppercaseis a lost cause. transformlist-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 onIE 6 (unchanged since 2001.) Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall 2008 Go Squared Ltd.


View more >