css help sheet 02
TRANSCRIPT
© 2008 Go Squared Ltd.
CSS Help SheetCSS Help SheetGoSquaredGoSquared
Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall
SyntaxSyntax
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”>
This Needs a Diagram Shorthand
CommentsBorder
height; width;margin-top;margin-right;margin-bottom;margin-left;padding-top;padding-right;padding-bottom;padding-left;
backgroundborderborder-bottomborder-leftborder-rightborder-topfontlist-stylemarginpadding
/* Comments */
Media Typesallbrailleembossedhandheldprintprojectionscreenspeechttytv
UnitsLength%emptpxKeywordsbolderlighterlarger
PseudoSelectors
:hover:active:focus:link:visited:�rst-line:�rst-letter
Generalclass String preceded by a full stop [.]ID String preceded by a hash [#]div Formats structure or block of textspan Inline formattingcolor Foreground colourcursor Appearance of the cursor
over�ow How to handle content thatover�ows its box.visible, hidden, scroll, auto
visibility visible, hidden
display block; inline; list-item; none
Fontfont-style italic, normal
font-size Size of the font
font-family Speci�c font[s] to be used.
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer [100-900]
Textletter-spacing Space between lettersline-height Vertical space between baselinestext-align Horizontal alignmenttext-decoration
blink, line-through, none, overline, underline
text-indent First line indentationtext-transform
capitalise, lowercase, uppercase
vertical-align Vertical alignmentword-spacing Spacing between words
width
height
paddingmarginborder
border-width Width of the border
border-color Colour of the border
border-style dashed; dotted; double; groove; inset;outset; ridge; solid; none;
Positionclear If any �oating elements around the element
both, left, right, none
�oat Floats to a speci�ed sideleft, right, none
left The left position of an elementauto, length values [pt, in, cm, px]
top The top position of an elementauto, length values [pt, in, cm, px]
z-index Above or below overlapping elementsauto, integer [higher numbers on top]
position static, relative, absolute
Backgroundbackground-color Colour of backgroundbackground-image Background imagebackground-repeat repeat, no-repeat, repeat-x, repeat-y
background-position
(x y), top, center, bottom, left, right
background-attachment
Background image scrolls with elementscroll, �xed
Listlist-style-type
Type of bullet or numbering in the listdisc; circle; square; decimal; lower-roman;upper-roman; lower-alpha; upper-alpha; none
list-style-position
Position of the bullet or number in a listinside; outside
list-style-image
Image to be used as the bullet in the list
Please note thatdeveloping CSSto work with IE6is a lost cause.Spread the word:encourage yourusers to give up onIE 6 (unchanged since 2001.)