Fonts |
font-family |
<family-name> | <generic-family> |
Always end with generic family name. |
font-weight |
lighter | normal | bold | bolder | inherit |
|
font-size |
xx-small | x-small | small | medium | large |
x-large | xx-large | smaller | larger | <length> |
<percentage> | inherit |
Percentage calculated w.r.t. the parent element's font size. |
font-style |
italic | oblique | normal | inherit |
Italic is separate font face but oblique is just normal slanted. |
font-variations |
small-caps | normal | inherit |
|
font |
[<font-style> | <font-variant> | <font-weight>]
<font-size> <font-family> | inherit |
Must have font-size and font-family in that order. |
Text |
text-indent |
<length> | <percentage> | inherit |
Percentage calculated off the width of the containing block |
text-align |
left | center | right | justify | inherit |
Default value browser dependent |
line-height |
<length> | <percentage> | normal | inherit |
Percentage relative to font size. |
vertical-align |
baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length> | inherit |
Percentage calculated off the line-height. |
word-spacing |
<length> | normal | inherit |
|
letter-spacing |
<length> | normal | inherit |
|
text-transform |
uppercase | lowercase | capitalize | none | inherit |
|
text-decoration |
none | underline | overline | line-through | blink | inherit
|
|
white-space |
normal | nowrap | pre | pre-wrap | pre-line | inherit |
|
direction |
ltr | rtl | inherit |
|
Element Box |
width |
<length> | auto | inherit |
|
height |
<length> | auto | inherit |
|
Margins |
margin |
<length> | <percentage> | auto | inherit |
Percentage refers to the width of the containing block |
margin-top, margin-right, margin-bottom, margin-left |
<length> | <percentage> | auto | inherit |
Percentage refers to the width of the containing block |
|
Borders |
border-style |
none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset | inherit |
Browsers are only required to support solid and
none. |
border-top-style, border-right-style, border-bottom-style,
border-left-style |
none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset | inherit |
|
border-width |
thin | medium | thick | <length> | inherit |
|
border-top-width, border-right-width, border-bottom-width,
border-left-width |
thin | medium | thick | <length> | inherit |
|
border-color |
<color> | transparent | inherit |
|
border-top-color, border-right-color, border-bottom-color,
border-left-color |
<color> | transparent | inherit |
|
border-top, border-right, border-bottom, border-left |
[<border-width> | <border-style> |
<border-color>] | inherit |
|
border |
[<border-width> | <border-style> |
<border-color>] | inherit |
|
Padding |
padding |
<length> | <percentage> | inherit |
Percentage refers to the width of the containing block. |
padding-top, padding-right, padding-bottom, padding-left |
<length> | <percentage> | inherit |
Percentage refers to the width of the containing block. |
Colors |
color |
<color> | inherit |
|
Background |
background-color |
<color> | transparent | inherit |
|
background-image |
<uri> | none | inherit |
|
background-repeat |
repeat | repeat-x | repeat-y | no-repeat | inherit |
|
background-position |
[<percentage> | <length> | left | center right]
[<percentage> | <length>] || [left | center | right] ||
[top | center | bottom] | inherit |
|
background-attachment |
scroll | fixed | inherit |
|
background |
[<background-color> | <background-image> |
<background-repeat> | <background-attachment> |
<background-position>] | inherit |
|
Layout |
float |
left | right | none | inherit |
|
clear |
left | right | both | none |
|
position |
static | relative | absolute | fixed | inherit |
|
top, right, bottom, left |
<length> | <percentage> | auto | inherit |
Percentage refers to the height of the containing block for
top and bottom and the width of the containing block
for right and left. |
min-width, min-height |
<length> | <percentage> | inherit |
Percentage refers to the width of the containing block |
max-width, max-height |
<length> | <percentage> | none | inherit |
Percentage refers to the height of the containing block |
overflow |
visible | hidden | scroll | auto | inherit |
|
clip |
rect (top, right, bottom, left) |
auto | inherit |
|
visibility |
visible | hidden | collapse | inherit |
|
z-index |
<integer> | auto | inherit |
|
Tables |
display |
none | inline | block | inline-block | list-item | run-in |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | inherit |
|
caption-side |
top | bottom |
|
border-collapse |
collapse | separate | inherit |
|
border-spacing |
<length><length> | inherit |
Lengths are horizontal and then vertical |
empty-cells |
show | hide | inherit |
Property is ignored unless border-collapse value is
separate. |
table-layout |
auto | fixed | inherit |
|
Lists |
list-style-type |
disc | circle | square | decimal | decimal-leading-zero |
upper-alpha | lower-alpha | upper-roman | lower-roman | none |
inherit |
|
list-style-image |
<uri> | none | inherit |
|
list-style-position |
inside | outside | inherit |
|
list-style |
[<list-style-type> | <list-style-image> |
<list-style-position>] | inherit |
|
content |
normal | [<string> | <uri> | <counter> |
attr (<identifier>) | open-quote | close-quote |
no-open-quote | no-close-quote] + | inherit
|
|
quotes |
[<string><string>] + | none | inherit
| |
counter-reset |
[<string><string>] + | none | inherit
| |
counter-increment |
[<string><string>] + | none | inherit
| |
Cursor |
cursor |
[<uri>][auto | default | pointer | crosshair | move |
r-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
s-resize | w-resize | text | wait | help | progress] | inherit |
|
Outline |
outline-style |
none | dotted | dashed | solid | double | groove | ridge |
inset | outset | inherit |
outline-width |
thin | medium | thick | <length> | inherit |
|
outline-color |
<color> | invert | inherit |
|
outline |
[<outline-color> | <outline-style> | <outline-width>] |
inherit |
|
Paged Media |
size |
<length> | auto | portrait | landscape | inherit |
|
page |
<identifier> | inherit |
|
page-break-before, page-break-after |
auto | always | avoid | left | right | inherit |
|
page-break-inside |
auto | avoid | inherit |
|
widows, orphans |
<integer> | inherit |
|