CSS Property & Value Cheat Sheet

This table gives you a lot of the CSS properties and values in (hopefully) an easy-to-use format.

Universal Values
[color] green
#00ff00
#0f0
rgb(0, 255, 0)
rgb(0%, 100%, 0%)
These values are to be used below where you see [color], [length], or [style].

For color, one should be familiar with hexadecimal values (explained at the bottom of this page). If you don't know those, then type out the color's name, in keeping with the accepted color names listed here.

For length, some special explanation is needed. When defining text size, for example, "em" is a multiple of the existing font size; "ex" is the size of the letter "x" in the existing font; "px" is the size in pixels; ""pt" is point size; "pc" is in picas; "cm" is in centimeters; "mm" is millimeters; "in" is inches; and "%" is percent of the existing font size.

[length] normal
12pt
2em
2ex
2pc
12px
10mm
1cm
1in
110%
[style] none
dotted
dashed
solid
double
groove
ridge
inset
outset
Text Styles
color [color] changes the text color
font-weight normal
bold
lighter
bolder
100 ~ 900
changes the weight (boldness) of the text. For numbers, only multiples of 100 may be used; 400 is "normal"
font-family serif
sans-serif
cursive
fantasy
monospace
changes the font style; since specific fonts are not always common to all computers, this property designates families, which almost every computer will have at least one font representing the family.
font-size [length]
xx-small
x-small
ßsmall
medium
large
x-large
xx-large
changes the size of the font
font-variant normal
small-caps
allows you to use Small Caps text
font-style normal
italic
oblique
allows for italics
text-decoration none
underline
overline
line-through
blink
allows for lines or blinking
text-transform capitalize
uppercase
lowercase
allows for various capitalization styles
Text Layout
letter-spacing [length]
spaces letters closer or further apart (also called "kerning")
word-spacing [length]
spaces words closer or further apart
line-height 1.2
[length]
changes line spacing
vertical-align baseline
middle
sub
super
text-top
text-bottom
top
bottom
20%
positions text above or below the rest of the text in a line
text-indent 30
10%
[length]
creates an indent for the first line of a paragraph
text-align left
center
right
justify
aligns paragraphs of text
direction rtl
ltr
sets the text direction
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
upper-roman
lower-roman
upper-alpha
lower-alpha
upper-greek
lower-greek
upper-latin
lower-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
sets the type of ordered list "bullet" or "number" point; used with the "ol" command
list-style-image none
url(address)
uses an image as a bullet point in bullet lists
Background
background-color [color] sets a background color
background-image url(address) sets a background image
background-attachment scroll
fixed
allows for you to fix the background image so it does not scroll with the page content
background-repeat repeat
repeat-x
repeat-y
no-repeat
usually background images repeat (or "tile"); this allows the images to repeat only vertically, horizontally, or not at all
background-position 10% 10%
20px 20px
top
left
center
right
bottom
top left
top center
etc.
sets the position of the background image
background see above values for backgrounds allows multiple values from the other background settings
Border
note: if applied to the table command, these apply to all cell walls, inner and outer; if applied to the td command, these apply to only the inner walls of any cell; if applied to the tr command, only colors will apply, to the inner walls of all cells in the row. These can be applied elsewhere, however, e.g. to text directly.
border-width thin
medium
thick
[length]
sets the style of the border; "length" goes by the same length values used above; if only one width is given, it applies to the whole cell, but if more than one is given, widths apply to different sides--2 widths = top/bottom, left/right; 3 widths = top, left/right, bottom; 4 widths = top, left, bottom, right
border-top-width "
border-right-width "
border-bottom-width "
border-left-width "
border-color [color]
sets the border color; if only one color is given, it applies to the whole cell, but if more than one is given, colors apply to different sides--2 colors = top/bottom, left/right; 3 colors = top, left/right, bottom; 4 colors = top, left, bottom, right
border-style [style] sets the border style; if only one style is given, it applies to the whole cell, but if more than one is given, styles apply to different sides--2 styles = top/bottom, left/right; 3 styles = top, left/right, bottom; 4 styles = top, left, bottom, right
border width:
thin
medium
thick
[color]
[length]
[style]
a catchall property for all borders in a particular cell; many attributes can be added to this separated by spaces (e.g., "thin red solid")
border-top "
border-right "
border-bottom "
border-left "
border-collapse collapse
separate
using the value "collapse" eliminates the extra border line around tables, and makes them simple (as in word processing apps)
border-spacing [length] if there is only one value, then it increases the spacing between cells in a table; if there are two values, then the first designates horizontal spacing, and the second indicates vertical spacing
Margins
note: margins cannot always be applied in all circumstances
margin 20%
auto
[length]
sets the margin (the space between the outside of an element and the next element); sometimes can be applied to plaint text
margin-top "
margin-right "
margin-bottom "
margin-left "
Padding
note: margins cannot always be applied in all circumstances
padding 20%
auto
[length]
sets the padding (the space between the outer and inner walls of a table); sometimes can be applied to plaint text
padding-top "
padding-right "
padding-bottom "
padding-left "
Page Layout
these properties let you position and size elements freely within a web page
position static
relative
absolute
fixed
this defines how the position of an object is determined, and is followed by more specific positioning properties. "static" means normal positioning; "relative" moves the position relative to the static position; "absolute" moves the position relative to the 'parent' element, for example the body, but allows the element to scroll up and down; "fixed" is like "absolute," but the item does not scroll up and down
top auto
20%
[length]
left "
bottom "
right "
width auto
20%
[length]
sets the width of an element; properties min-width and max-width also available, but I could not make them work
height auto
20%
[length]
sets the height of an element; properties min-height and max-height also available, but I could not make them work
z-index 2
auto
when elements overlap each other, the element with the higher number is on top of the other(s)
visibility visible
hidden
inherit
makes an object visible or invisible; useful with hover or javascript commands
overflow visible
hidden
scroll
auto
when contents become too big to fit inside an element, this property decides how to handle the situation; "visible" increases the size of the element; "hidden" clips the content which is greater than the element area; "scroll" adds scroll bars always (even with no overflow); "auto" adds scroll bars when the content becomes too big
Cool Stuff
cursor auto
crosshair
default
poiner
move
*-resize
text
wait
help
changes the shape of the cursor when it is over the element; the "*" in "*-resize" must be replaces with a compass direction, e.g. n, s, e, w, ne, nw, se, sw to produce an arrow pointing in that direction