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