This is a reference of the most common CSS properties and their values. Default values are highlighted and bold. We also include a review of selectors.
| Property | Possible Values |
|---|---|
font-family |
a font name (e.g, "Times New Roman") |
cursive |
|
fantasy |
|
monospace |
|
sans-serif |
|
serif |
|
font-size |
a length (e.g, 12pt, 10px, 2em, etc.) |
| a percentage (e.g, 150%) | |
xx-small |
|
x-small |
|
small |
|
medium |
|
large |
|
x-large |
|
xx-large |
|
smaller |
|
larger |
|
font-style |
normal |
italic |
|
oblique |
|
font-variant |
normal |
small-caps |
|
font-weight |
normal |
bold |
|
bolder |
|
lighter |
|
100 |
|
200 |
|
300 |
|
400 |
|
500 |
|
600 |
|
700 |
|
800 |
|
900 |
| Property | Possible Values |
|---|---|
|
letter-spacing |
normal |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
line-height |
normal |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a number (e.g, 1.5 = 1.5 x the current font size) |
|
|
a percentage (e.g, 150%) |
|
|
text-align |
left
|
right
|
|
center
|
|
justify
|
|
|
text-decoration |
none |
underline
|
|
overline
|
|
|
line-through |
|
blink
|
|
|
text-indent |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
|
text-transform |
none |
capitalize
|
|
uppercase
|
|
lowercase
|
|
|
vertical-align |
baseline |
|
a percentage (e.g, 150%) |
|
sub
|
|
super
|
|
top
|
|
middle
|
|
bottom
|
|
|
text-top |
|
|
text-bottom |
|
|
white-space |
normal |
pre
|
|
nowrap
|
|
|
word-spacing |
normal |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
| Property | Possible Values |
|---|---|
|
background-attachment |
scroll |
fixed
|
|
|
background-color |
transparent |
|
a color value |
|
|
background-image |
none
|
|
url(url) |
|
|
background-position |
a percentage (e.g, 150%) |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
top
|
|
bottom
|
|
left
|
|
right
|
|
center
|
|
|
background-repeat |
repeat |
|
repeat-x |
|
|
repeat-y |
|
|
no-repeat |
|
color
|
a color value |
| Property | Possible Values |
|---|---|
|
list-style-image |
none |
|
url(url) |
|
|
list-style-position |
outside |
inside
|
|
|
list-style-type |
disc |
circle
|
|
square
|
|
decimal
|
|
|
lower-alpha |
|
|
upper-alpha |
|
|
lower-roman |
|
|
upper-roman |
|
none
|
| Property | Possible Values |
|---|---|
position
|
static |
absolute
|
|
fixed
|
|
relative
|
|
top
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
bottom
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
left
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
right
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
|
z-index |
auto |
|
a relative number (e.g, 20 has a higher z-index than 10) |
|
display
|
block |
inline
|
|
|
list-item |
|
none
|
|
visibility
|
inherit |
visible
|
|
hidden
|
| Property | Possible Values |
|---|---|
width
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
height
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
| Property | Possible Values |
|---|---|
float
|
none |
left
|
|
right
|
|
clear
|
none |
left
|
|
right
|
|
both
|
| Property | Possible Values |
|---|---|
|
border-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
medium |
|
thin
|
|
thick
|
|
|
border-top-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
medium |
|
thin
|
|
thick
|
|
|
border-bottom-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
medium |
|
thin
|
|
thick
|
|
|
border-left-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
medium |
|
thin
|
|
thick
|
|
|
border-right-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
medium |
|
thin
|
|
thick
|
|
|
border-color |
a color value |
|
border-style |
none |
dashed
|
|
dotted
|
|
double
|
|
groove
|
|
inset
|
|
outset
|
|
ridge
|
|
solid
|
margin
|
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
|
margin-top |
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
|
margin-bottom |
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
|
margin-left |
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
|
|
margin-right |
auto |
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
|
a percentage (e.g, 150%) |
padding
|
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
|
padding-top |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
|
padding-bottom |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
|
padding-left |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
|
padding-right |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
| Property | Possible Values |
|---|---|
cursor
|
auto |
crosshair
|
|
help
|
|
move
|
|
pointer
|
|
text
|
|
wait
|
|
|
n-resize |
|
|
s-resize |
|
|
e-resize |
|
|
w-resize |
|
|
ne-resize |
|
|
se-resize |
|
|
nw-resize |
|
|
sw-resize |
