imsky.org
CSS Cheat Sheet brought to you by pxleyes.com
div
div, span
div span
#content
.box
ul#box
span.box
*
#box *
a:link, a:active,
a:visited
a:hover
div > span
position
float
top, left, right,
bottom
display
z-index
overflow
background
cursor
outline
border-collapse
clear
font-family
font-size
color
font-weight
font-style
text-decoration
text-align
line-height
letter-spacing
text-indent
text-transform
vertical-align
border
border-top
border-bottom
border-left
border-right
list-style-type
list-style-
position
list-style-image
padding
content
border
margin
Selectors
Text Borders and Lists Everything Else
Box Model Positioning
all DIV tags
all DIV tags and all SPAN tags
all SPAN tags inside DIVs
element with ID “content”
all elements with CLASS “box”
UL tag with ID “box”
all SPAN tags with CLASS “box”
all elements
all elements inside #box
links in normal state, in clicked state,
and in visited state
link with mouse over it
all SPANs one-level deep in a DIV
places elements on screen, e.g.
absolute, fixed, relative
stacks elements horizontally in a
particular direction, e.g. left
specifies the offsets used in absolute,
fixed, and relative positions, e.g.
top:10px;left:10px
sets how the element is placed in the
doc flow, e.g. block, inline, none
sets the stacking order of elements,
e.g. z-index of 1 is below z-index of 2
sets what happens to content outside
of container, e.g. auto, hidden
sets background of an element, in the
format: background: (color) (image)
(repeat) (position), e.g. background:
#000 url(bg.png) repeat-x top left
sets shape of cursor, e.g. pointer
a border drawn around an element
that doesn’t affect the box model
sets how borders within tables
behave, e.g. collapse
sets on what side a new line starts in
relation to nearby floated elements,
e.g. left, right, both
font used, e.g. Helvetica, Arial
text size, e.g. 60px, 3em
text color, e.g. #000, #abcdef
how bold the text is, e.g. bold
what style the text is, e.g. italic
sets a variety of effects on text, e.g.
underline, overline, none
how text is aligned, e.g. center
spacing between lines, e.g. 2em
spacing between letters, e.g. 5px
indent of the first line, e.g. 2em
applies formatting to text, e.g. upper-
case, lowercase, capitalize
align relative to baseline, e.g. text-top
sets border style for all borders, in
the format: border: (solid, dashed,
dotted, double) (width) (color), e.g.
border: solid 1px #000
sets border style for a specific
border (same property syntax used
for padding and margin, e.g.
margin-left)
sets style of bullets, e.g. square
sets how text wraps when bulleted,
e.g. outside, inside
sets an image for a bullet, e.g.
list-style-image:url(bullet.png)
Always write <!doctype html> in your files!
