Appendix
CSS Properties and Values
This table provides a reference to some of the most commonly used CSS properties in CSS 2.1. In addition to the name of the property, the allowed values have been listed. For a complete list of CSS properties visit http://www.w3.org/TR/CSS21/propidx.html. For a more in-depth discussion on how to add custom values, please review Lesson 4: Fundamentals of HTML, XHTML, and CSS.
Name |
Possible Values |
Default value |
|
background-attachment |
scroll | fixed | inherit |
scroll |
|
background-color |
<color> | transparent | inherit |
transparent |
|
background-image |
<uri> | none | inherit |
none |
|
background-position |
[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
0% 0% |
|
background-repeat |
repeat | repeat-x | repeat-y | no-repeat | inherit |
repeat |
|
background |
[background-color || background-image || background-repeat || background-attachment || background-position] | inherit |
see individual properties |
|
border-collapse |
collapse | separate | inherit |
separate |
|
border-color |
[ <color> | transparent ]{1,4} | inherit |
see individual properties |
|
border-spacing |
<length> <length>? | inherit |
0 |
|
border-style |
<border-style>{1,4} | inherit |
see individual properties |
|
border-top border-right border-bottom border-left |
[ <border-width> || <border-style> || border-top-color ] | inherit |
see individual properties |
|
border-top-color border-right-color border-bottom-color border-left-color |
<color> | transparent | inherit |
the value of the color property |
|
border-top-style border-right-style border-bottom-style border-left-style |
<border-style> | inherit |
none |
|
border-top-width border-right-width border-bottom-width border-left-width |
<border-width> | inherit |
medium |
|
border-width |
<border-width>{1,4} | inherit |
see individual properties |
|
border |
[ <border-width> || <border-style> || border-top-color ] | inherit |
see individual properties |
|
bottom |
<length> | <percentage> | auto | inherit |
auto |
|
clear |
none | left | right | both | inherit |
none |
|
clip |
<shape> | auto | inherit |
auto |
|
color |
<color> | inherit |
depends on user agent |
|
display |
inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
inline |
|
float |
left | right | none | inherit |
none |
|
font-family |
[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit |
depends on user agent |
|
font-size |
<absolute-size> | <relative-size> | <length> | <percentage> | inherit |
medium |
|
font-style |
normal | italic | oblique | inherit |
normal |
|
font-variant |
normal | small-caps | inherit |
normal |
|
font-weight |
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
normal |
|
font |
[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
see individual properties |
|
height |
<length> | <percentage> | auto | inherit |
auto |
|
left |
<length> | <percentage> | auto | inherit |
auto |
|
letter-spacing |
normal | <length> | inherit |
normal |
|
line-height |
normal | <number> | <length> | <percentage> | inherit |
normal |
|
list-style-image |
<uri> | none | inherit |
none |
|
list-style-position |
inside | outside | inherit |
outside |
|
list-style-type |
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
disc |
|
list-style |
[ list-style-type || list-style-position || list-style-image ] | inherit |
see individual properties |
|
margin-right margin-left |
<margin-width> | inherit |
0 |
|
margin-top margin-bottom |
<margin-width> | inherit |
0 |
|
margin |
<margin-width>{1,4} | inherit |
see individual properties |
|
max-height |
<length> | <percentage> | none | inherit |
none |
|
max-width |
<length> | <percentage> | none | inherit |
none |
|
min-height |
<length> | <percentage> | inherit |
0 |
|
min-width |
<length> | <percentage> | inherit |
0 |
|
overflow |
visible | hidden | scroll | auto | inherit |
visible |
|
padding-top padding-right padding-bottom padding-left |
<padding-width> | inherit |
0 |
|
padding |
<padding-width>{1,4} | inherit |
see individual properties |
|
position |
static | relative | absolute | fixed | inherit |
static |
|
quotes |
[<string> <string>]+ | none | inherit |
depends on user agent |
|
right |
<length> | <percentage> | auto | inherit |
auto |
|
table-layout |
auto | fixed | inherit |
auto |
|
text-align |
left | right | center | justify | inherit |
a nameless value that acts as left if direction is ltr, right if direction is rtl |
|
text-decoration |
none | [ underline || overline || line-through || blink ] | inherit |
none |
|
text-indent |
<length> | <percentage> | inherit |
0 |
|
text-transform |
capitalize | uppercase | lowercase | none | inherit |
none |
|
top |
<length> | <percentage> | auto | inherit |
auto |
|
vertical-align |
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
baseline |
|
visibility |
visible | hidden | collapse | inherit |
visible |
|
white-space |
normal | pre | nowrap | pre-wrap | pre-line | inherit |
normal |
|
width |
<length> | <percentage> | auto | inherit |
auto |
|
word-spacing |
normal | <length> | inherit |
normal |
|
z-index |
auto | <integer> | inherit |
auto |