This appendix contains a table of CSS properties from W3C's CSS 2.1 specification (see http://www.w3.org/TR/CSS21), a table of Microsoft proprietary extensions to CSS and a table of some of Mozilla's proprietary extensions. Table B-1 provides a listing of the property's values, initial value, what the property applies to, if the values in the property are inherited, if the property accepts percentages, and the property's media group.
Table B-2 presents a listing of Microsoft's proprietary extensions to the specifications. These properties will not validate if you run them through a validator and they will only appear successfully in a browser built by Microsoft. Your mileage may vary with the use of these extensions.
As of this writing, Mozilla's proprietary extensions that are available in Mozilla, Firefox, and Netscape Navigator 6+ browsers, are not fully documented. Table B-3 lists a portion of extensions that are documented from Mozilla's developer's web site. Check their site for a complete listing of the extensions, at http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions.
Table B-1. CSS 2.1 properties
Name | Values | Initial value | Applies to(Default: all) | Inherited? | Percentages(Default: N/A) | Media groups |
---|
'background-attachment' | scroll | fixed | inherit | scroll | | no | | visual |
'background-color' | <color> | transparent | inherit | transparent | | no | | visual |
'background-image' | <uri> | none | inherit | none | | no | | visual |
'background-position' | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | 0% 0% | | no | refer to the size of the box itself | visual |
'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | | no | | visual |
'background' | [ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | see individual properties | | no | allowed on 'background-position' | visual |
'border-collapse' | collapse | separate | inherit | separate | 'table' and 'inline-table' elements | yes | | visual |
'border-color' | [ <color> | transparent ]{1,4} | inherit | see individual properties | | no | | visual |
'border-spacing' | <length> <length>? | inherit | 0 | 'table' and 'inline-table' elements | yes | | visual |
'border-style' | <border-style>{1,4} | inherit | see individual properties | | no | | visual |
'border-top' 'border-right' 'border-bottom' 'border-left' | [ <border-width> || <border-style> || >'border-top-color' ] | inherit | see individual properties | | no | | visual |
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | <color> | transparent | inherit | the value of the 'color' property | | no | | visual |
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | <border-style> | inherit | none | | no | | visual |
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | <border-width> | inherit | medium | | no | | visual |
'border-width' | <border-width>{1,4} | inherit | see individual properties | | no | | visual |
'border' | [ <border-width> || <border-style> || >'border-top-color' ] | inherit | see individual properties | | no | | visual |
'bottom' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
'caption-side' | top | bottom | inherit | top | 'table-caption' elements | yes | | visual |
'clear' | none | left | right | both | inherit | none | block-level elements | no | | visual |
'clip' | <shape> | auto | inherit | auto | absolutely positioned elements | no | | visual |
'color' | <color> | inherit | depends on user agent | | yes | | visual |
'content' | normal | none | [ <string> | <uri> | <counter> | attr( <identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | normal | :before and :after pseudo-elements | no | | all |
'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none | | no | | all |
'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none | | no | | all |
'cursor' | [ [ <uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit | auto | | yes | | visual, interactive |
'direction' | ltr | rtl | inherit | ltr | all elements, but see prose | yes | | visual |
'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 | | no | | all |
'empty-cells' | show | hide | inherit | show | 'table-cell' elements | yes | | visual |
'float' | left | right | none | inherit | none | all, but see 9.7 | no | | visual |
'font-family' | [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit | depends on user agent | | yes | | visual |
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | | yes | refer to parent element's font size | visual |
'font-style' | normal | italic | oblique | inherit | normal | | yes | | visual |
'font-variant' | normal | small-caps | inherit | normal | | yes | | visual |
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | | yes | | visual |
'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 | | yes | see individual properties | visual |
'height' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." | visual |
'left' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
'letter-spacing' | normal | <length> | inherit | normal | | yes | | visual |
'line-height' | normal | <number> | <length> | <percentage> | inherit | normal | | yes | refer to the font size of the element itself | visual |
'list-style-image' | <uri> | none | inherit | none | elements with 'display: list-item' | yes | | visual |
'list-style-position' | inside | outside | inherit | outside | elements with 'display: list-item' | yes | | visual |
'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 | elements with 'display: list-item' | yes | | visual |
'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | see individual properties | elements with 'display: list-item' | yes | | visual |
'margin-right' 'margin-left' | <margin-width> | inherit | 0 | all elements except elements with table display types other than table and inline-table | no | refer to width of containing block | visual |
'margin-top' 'margin-bottom' | <margin-width> | inherit | 0 | all elements except elements with table display types other than table and inline-table | no | refer to width of containing block | visual |
'margin' | <margin-width>{1,4} | inherit | see individual properties | all elements except elements with table display types other than table and inline-table | no | refer to width of containing block | visual |
'max-height' | <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table columns, and column groups | no | Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." | visual |
'max-width' | <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
'min-height' | <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table columns, and column groups | no | Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." | visual |
'min-width' | <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
'orphans' | <integer> | inherit | 2 | block-level elements | yes | | visual, paged |
'outline-color' | <color> | invert | inherit | invert | | no | | visual, interactive |
'outline-style' | <border-style> | inherit | none | | no | | visual, interactive |
'outline-width' | <border-width> | inherit | medium | | no | | visual, interactive |
'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | see individual properties | | no | | visual, interactive |
'overflow' | visible | hidden | scroll | auto | inherit | visible | non-replaced block-level elements, table cells, and inline-block elements | no | | visual |
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | <padding-width> | inherit | 0 | all elements except elements with table display types other than table, inline-table, and table-cell | no | refer to width of containing block | visual |
'padding' | <padding-width>{1,4} | inherit | see individual properties | all elements except elements with table display types other than table, inline-table, and table-cell | no | refer to width of containing block | visual |
'page-break-after' | auto | always | avoid | left | right | inherit | auto | block-level elements | no | | visual, paged |
'page-break-before' | auto | always | avoid | left | right | inherit | auto | block-level elements | no | | visual, paged |
'page-break-inside' | avoid | auto | inherit | auto | block-level elements | yes | | visual, paged |
'position' | static | relative | absolute | fixed | inherit | static | | no | | visual |
'quotes' | [ <string> <string>]+ | none | inherit | depends on user agent | | yes | | visual |
'right' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
'table-layout' | auto | fixed | inherit | auto | 'table' and 'inline-table' elements | no | | visual |
'text-align' | left | right | center | justify | inherit | 'left' if 'direction' is 'ltr'; 'right' if 'direction' is 'rtl' | block-level elements, table cells and inline blocks | yes | | visual |
'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none | | Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." | | visual |
'text-indent' | <length> | <percentage> | inherit | 0 | block-level elements, table cells and inline blocks | yes | refer to width of containing block | visual |
'text-transform' | capitalize | uppercase | lowercase | none | inherit | none | | yes | | visual |
'top' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
'unicode-bidi' | normal | embed | bidi-override | inherit | normal | all elements, but see prose | no | | visual |
'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | inline-level and 'table-cell' elements | no | refer to the 'line-height' of the element itself | visual |
'visibility' | visible | hidden | collapse | inherit | visible | | yes | | visual |
'white-space' | normal | pre | nowrap | pre-wrap | pre-line | inherit | normal | | yes | | visual |
'widows' | <integer> | inherit | 2 | block-level elements | yes | | visual, paged |
'width' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
'word-spacing' | normal | <length> | inherit | normal | | yes | | visual |
'z-index' | auto | <integer> | inherit | auto | positioned elements | no | | Visual |