css 2.1 help cheat sheet
DESCRIPTION
“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.http://www.gosquared.com/liquidicity/archives/1010TRANSCRIPT
© 2010 Go Squared Ltd.
ShorthandShorthand
CommentsComments
Pseudo SelectorsPseudo Selectors
Media TypesMedia Types
UnitsUnits
FontFont
TextText
ListList
BackgroundBackground
PositionPosition
BorderBorder
Margins + PaddingMargins + PaddingSyntaxSyntax
GoSquaredGoSquared
Download this Help Sheet now at gosquared.com/liquidicity
Put it on your wallOriginal 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 */
allbrailleembossedhandheldprintprojectionscreenspeechttytv
Keywords
%emptpx
bolderlighterlarger
:hover:active:focus:link:visited:!rst-line:!rst-letter
font-size Size of the fontfont-family Speci!c font[s] to be used.
letter-spacing Space between lettersline-height Vertical space between baselinestext-align Horizontal alignmenttext-decorationtext-indent First line indentationtext-transformvertical-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;
clear If any "oating elements around the elementboth, 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
background-color Colour of backgroundbackground-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 elementscroll, !xed
list-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
Developing forIE6 is a lost cause.
GeneralGeneralclass
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 thatover"ows its box.visible; hidden; scroll; autovisible; hidden
block; inline; list-item; none
CSS Help SheetCSS Help Sheet
backgroundborderborder-bottomborder-leftborder-rightborder-topfontlist-stylemarginpadding
font-style italic, normalfont-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