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