CSS Cheat Sheet
http://www.lesliefranke.com/files/reference/csscheatsheet.html
CSS CHEAT SHEET
Shorthand*
background border border-bottom border-left border-right border-top font list-style margin padding Syntax selector {property: value;} External Style Sheet <link rel="stylesheet" type="text/css" href="style.css" /> Internal Style <style type="text/css"> selector {property: value;} </style> Inline Style <tag style="property: value">
SYNTAX
BOX MODEL
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
Comments
/* Comment */
BORDER
border-width Width of the border border-style dashed; dotted; double; groove; inset; outset; ridge;
solid; none
Pseudo Selectors
:hover :active :focus :link :visited :first-line :first-letter
GENERAL
Class ID div span color cursor display String preceded by a period String preceded by a hash mark Formats structure or block of text Inline formatting Foreground color Appearance of the cursor
block; inline; list-item; none
border-color Color of the border
POSITION
clear float left top Any floating elements around the element?
both, left, right, none
Floats to a specified side
left, right, none
Media Types
all braille embossed handheld print projection screen speech tty tv
The left position of an element
auto, length values (pt, in, cm, px)
overflow How content overflowing its box is handled
visible, hidden, scroll, auto
The top position of an element
auto, length values (pt, in, cm, px)
visibility visible, hidden
position static, relative, absolute z-index Element above or below overlapping elements?
auto, integer (higher numbers on top)
FONT
font-style
Italic, normal
font-variant normal, small-caps font-weight bold, normal, lighter, bolder, integer
(100-900)
BACKGROUND
background-color background-image background-repeat backgroundattachment background-position Background color Background image
repeat, no-repeat, repeat-x, repeat-y
Units
Length % em pt px Keywords bolder lighter larger
font-size
Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters line-height text-align Vertical distance between baselines Horizontal alignment
Background image scroll with the element?
scroll, fixed (x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
text-decoration blink, line-through, none, overline,
underline
text-indent text-transform vertical-align word-spacing
First line indentation
capitalize, lowercase, uppercase
list-styleposition
Position of the bullet or number in a list
inside; outside
Vertical alignment Spacing between words
list-style-image Image to be used as the bullet in a list
* The properties for each selector are in the order they should appear when using shorthand notation.
1 of 1
6/5/2013 6:23 PM
