O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


CSS 2.1 Properties and Proprietary Extensions: Appendix B - CSS Cookbook, Third Edition

by Christopher Schmitt
CSS Cookbook, Third Edition book cover

This excerpt is from CSS Cookbook, Third Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

buy button

This appendix contains several tables. Table B.1, “CSS 2.1 properties” lists CSS properties from W3C’s CSS 2.1 specification (see http://www.w3.org/TR/CSS21). It lists the property’s values, initial value, what the property applies to, whether the values in the property are inherited, whether the property accepts percentages, and the property’s media group.

Table B.2, “Microsoft proprietary extensions to CSS” lists Microsoft’s proprietary extensions to the specifications. These properties will not validate if you run them through a validator and they will appear successfully only in a browser built by Microsoft. Your mileage will 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 and later browsers are not fully documented. Table B.3, “Mozilla CSS property extensions” lists some extensions that are documented from Mozilla’s developers’ website. Check the site for a complete list 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)

'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%

 

'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

'table' and 'inline-table'elements

'border-color'

[ <color> | transparent ]{1,4} | inherit

See individual properties

 

'border-spacing'

<length> <length>? | inherit

0

'table' and 'inline-table'elements

'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

Positioned elements

'caption-side'

top | bottom | inherit

top

'table-caption' elements

'clear'

none | left | right | both | inherit

none

Block-level elements

'clip'

<shape> | auto | inherit

auto

Absolutely positioned elements

'color'

<color> | inherit

Depends on user agent

 

'content'

normal | none | [ <string> | <uri> | <counter> | attr( <identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

normal

:before and :afterpseudo-elements

'counter-increment'

[ <identifier> <integer>? ]+ | none | inherit

none

 

'counter-reset'

[ <identifier> <integer>? ]+ | none | inherit

none

 

'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

 

'direction'

ltr | rtl | inherit

ltr

All elements, but see prose

'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

 

'empty-cells'

show | hide | inherit

show

'table-cell' elements

'float'

left | right | none | inherit

none

All

'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

All elements except nonreplaced inline elements, table columns, and column groups

'left'

<length> | <percentage> | auto | inherit

auto

Positioned elements

'letter-spacing'

normal | <length> | inherit

normal

 

'line-height'

normal | <number> | <length> | <percentage> | inherit

normal

 

'list-style-image'

<uri> | none | inherit

none

Elements with 'display: list-item'

'list-style-position'

inside | outside | inherit

outside

Elements with 'display: list-item'

'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'

'list-style'

[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

See individual properties

Elements with 'display: list-item'

'margin-right'

'margin-left'

<margin-width> | inherit

0

All elements except elements with table display types other than table and inline-table

'margin-top'

'margin-bottom'

<margin-width> | inherit

0

All elements except elements with table display types other than table and inline-table

'margin'

<margin-width>{1,4} | inherit

See individual properties

All elements except elements with table display types other than table and inline-table

'max-height'

<length> | <percentage> | none | inherit

none

All elements except nonreplaced inline elements, table columns, and column groups

'max-width'

<length> | <percentage> | none | inherit

none

All elements except nonreplaced inline elements, table rows, and row groups

'min-height'

<length> | <percentage> | inherit

0

All elements except nonreplaced inline elements, table columns, and column groups

'min-width'

<length> | <percentage> | inherit

0

All elements except nonreplaced inline elements, table rows, and row groups

'orphans'

<integer> | inherit

2

Block-level elements

'outline-color'

<color> | invert | inherit

invert

 

'outline-style'

<border-style> | inherit

none

 

'outline-width'

<border-width> | inherit

medium

 

'outline'

[ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit

See individual properties

 

'overflow'

visible | hidden | scroll | auto | inherit

visible

Nonreplaced block-level elements, table cells, and inline-block elements

'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

'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

'page-break-after'

auto | always | avoid | left | right | inherit

auto

Block-level elements

'page-break-before'

auto | always | avoid | left | right | inherit

auto

Block-level elements

'page-break-inside'

avoid | auto | inherit

auto

Block-level elements

'position'

static | relative | absolute | fixed | inherit

static

 

'quotes'

[ <string> <string>]+ | none | inherit

Depends on user agent

 

'right'

<length> | <percentage> | auto | inherit

auto

Positioned elements

'table-layout'

auto | fixed | inherit

auto

'table' and 'inline-table'elements

'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

'text-decoration'

none | [ underline || overline || line-through || blink ] | inherit

none

 

'text-indent'

<length> | <percentage> | inherit

0

Block-level elements, table cells, and inline blocks

'text-transform'

capitalize | uppercase | lowercase | none | inherit

none

 

'top'

<length> | <percentage> | auto | inherit

auto

Positioned elements

'unicode-bidi'

normal | embed | bidi-override | inherit

normal

All elements, but see prose

'vertical-align'

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

baseline

inline-level and 'table-cell'elements

'visibility'

visible | hidden | collapse | inherit

visible

 

'white-space'

normal | pre | nowrap | pre-wrap | pre-line | inherit

normal

 

'widows'

<integer> | inherit

2

Block-level elements

'width'

<length> | <percentage> | auto | inherit

auto

All elements except nonreplaced inline elements, table rows, and row groups

'word-spacing'

normal | <length> | inherit

normal

 

'z-index'

auto | <integer> | inherit

auto

Positioned elements

 

Name

Values

Inherited?

Percentages

(Default: N/A)

Media groups

'background-attachment'

scroll | fixed | inherit

No

 

Visual

'background-color'

<color> | transparent | inherit

No

 

Visual

'background-image'

<uri> | none | inherit

No

 

Visual

'background-position'

[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

No

Refer to the size of the box itself

Visual

'background-repeat'

repeat | repeat-x | repeat-y | no-repeat | inherit

No

 

Visual

'background'

[ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit

No

Allowed on 'background-position'

Visual

'border-collapse'

collapse | separate | inherit

Yes

 

Visual

'border-color'

[ <color> | transparent ]{1,4} | inherit

No

 

Visual

'border-spacing'

<length> <length>? | inherit

Yes

 

Visual

'border-style'

<border-style>{1,4} | inherit

No

 

Visual

'border-top'

'border-right'

'border-bottom'

'border-left'

[ <border-width> || <border-style> || >'border-top-color' ] | inherit

No

 

Visual

'border-top-color'

'border-right-color'

'border-bottom-color'

'border-left-color'

<color> | transparent | inherit

No

 

Visual

'border-top-style'

'border-right-style'

'border-bottom-style'

'border-left-style'

<border-style> | inherit

No

 

Visual

'border-top-width'

'border-right-width'

'border-bottom-width'

'border-left-width'

<border-width> | inherit

No

 

Visual

'border-width'

<border-width>{1,4} | inherit

No

 

Visual

'border'

[ <border-width> || <border-style> || >'border-top-color' ] | inherit

No

 

Visual

'bottom'

<length> | <percentage> | auto | inherit

No

Refer to height of containing block

Visual

'caption-side'

top | bottom | inherit

Yes

 

Visual

'clear'

none | left | right | both | inherit

No

 

Visual

'clip'

<shape> | auto | inherit

No

 

Visual

'color'

<color> | inherit

Yes

 

Visual

'content'

normal | none | [ <string> | <uri> | <counter> | attr( <identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

No

 

All

'counter-increment'

[ <identifier> <integer>? ]+ | none | inherit

No

 

All

'counter-reset'

[ <identifier> <integer>? ]+ | none | inherit

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

Yes

 

Visual, interactive

'direction'

ltr | rtl | inherit

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

No

 

All

'empty-cells'

show | hide | inherit

Yes

 

Visual

'float'

left | right | none | inherit

No

 

Visual

'font-family'

[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit

Yes

 

Visual

'font-size'

<absolute-size> | <relative-size> | <length> | <percentage> | inherit

Yes

Refer to parent element’s font size

Visual

'font-style'

normal | italic | oblique | inherit

Yes

 

Visual

'font-variant'

normal | small-caps | inherit

Yes

 

Visual

'font-weight'

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

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

Yes

See individual properties

Visual

'height'

<length> | <percentage> | auto | inherit

No

See prose

Visual

'left'

<length> | <percentage> | auto | inherit

No

Refer to width of containing block

Visual

'letter-spacing'

normal | <length> | inherit

Yes

 

Visual

'line-height'

normal | <number> | <length> | <percentage> | inherit

Yes

Refer to font size of element itself

Visual

'list-style-image'

<uri> | none | inherit

Yes

 

Visual

'list-style-position'

inside | outside | inherit

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

Yes

 

Visual

'list-style'

[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

Yes

 

Visual

'margin-right'

'margin-left'

<margin-width> | inherit

No

Refer to width of containing block

Visual

'margin-top'

'margin-bottom'

<margin-width> | inherit

No

Refer to width of containing block

Visual

'margin'

<margin-width>{1,4} | inherit

No

Refer to width of containing block

Visual

'max-height'

<length> | <percentage> | none | inherit

No

See prose

Visual

'max-width'

<length> | <percentage> | none | inherit

No

Refer to width of containing block

Visual

'min-height'

<length> | <percentage> | inherit

No

See prose

Visual

'min-width'

<length> | <percentage> | inherit

No

Refer to width of containing block

Visual

'orphans'

<integer> | inherit

Yes

 

Visual, paged

'outline-color'

<color> | invert | inherit

No

 

Visual, interactive

'outline-style'

<border-style> | inherit

No

 

Visual, interactive

'outline-width'

<border-width> | inherit

No

 

Visual, interactive

'outline'

[ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit

No

 

Visual, interactive

'overflow'

visible | hidden | scroll | auto | inherit

No

 

Visual

'padding-top'

'padding-right'

'padding-bottom'

'padding-left'

<padding-width> | inherit

No

Refer to width of containing block

Visual

'padding'

<padding-width>{1,4} | inherit

No

Refer to width of containing block

Visual

'page-break-after'

auto | always | avoid | left | right | inherit

No

 

Visual, paged

'page-break-before'

auto | always | avoid | left | right | inherit

No

 

Visual, paged

'page-break-inside'

avoid | auto | inherit

Yes

 

Visual, paged

'position'

static | relative | absolute | fixed | inherit

No

 

Visual

'quotes'

[ <string> <string>]+ | none | inherit

Yes

 

Visual

'right'

<length> | <percentage> | auto | inherit

No

Refer to width of containing block

Visual

'table-layout'

auto | fixed | inherit

No

 

Visual

'text-align'

left | right | center | justify | inherit

Yes

 

Visual

'text-decoration'

none | [ underline || overline || line-through || blink ] | inherit

No (see prose)

 

Visual

'text-indent'

<length> | <percentage> | inherit

Yes

Refer to width of containing block

Visual

'text-transform'

capitalize | uppercase | lowercase | none | inherit

Yes

 

Visual

'top'

<length> | <percentage> | auto | inherit

no

Refer to height of containing block

Visual

'unicode-bidi'

normal | embed | bidi-override | inherit

No

 

Visual

'vertical-align'

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

No

Refer to 'line-height' of the element itself

Visual

'visibility'

visible | hidden | collapse | inherit

Yes

 

Visual

'white-space'

normal | pre | nowrap | pre-wrap | pre-line | inherit

Yes

 

Visual

'widows'

<integer> | inherit

Yes

 

Visual, paged

'width'

<length> | <percentage> | auto | inherit

No

Refer to width of containing block

Visual

'word-spacing'

normal | <length> | inherit

Yes

 

Visual

'z-index'

auto | <integer> | inherit

No

 

Visual

 


The CSS 2.1 Property Table is Copyright © 2005 World Wide Web Consortium (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231

Table B.2. Microsoft proprietary extensions to CSS

Name

Values

Initial value

Applies to (Default: all)

Inherited?

Percentages (Default: N/A)

Media groups

'filter'

See http://tr.im/filterproperty

N/A

 

No

 

Filter properties

'overflow-x'

visible | scroll | hidden | auto

visible (except for textarea, then initial value is hidden)

 

No

 

Visual

'overflow-y'

visible | scroll | hidden | auto

visible (except for textarea, then initial value is auto)

   

Visual

'scrollbar-3dlight-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-arrow-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-base-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-darkshadow-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-face-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-highlight-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'scrollbar-shadow-color'

<color>

Default color

Element with scroll bar

Yes

 

Visual

'zoom'

normal | <number> | <percentage>

normal

 

No

Yes

Visual

'background-position-x'

<length> | <percentage> | left | center | right

0%

 

No

Yes

Visual

'background-position-y'

<length> | <percentage> | top | center | bottom

0%

 

No

Yes

Visual

'ime-mode'

auto | active |inactive | disabled

auto

 

Yes

 

Visual

'layout-grid'

mode | type | line | char

both loose none none

 

Yes

 

Visual

'layout-grid-char'

<length> | <percentage> | none | auto

none

 

No

Yes

Visual

'layout-grid-line'

<length> | <percentage> | none | auto

none

 

No

Yes

Visual

'layout-grid-mode'

both | none | line | char

both

 

Yes

 

Visual

'layout-grid-type'

loose | strict | fixed

loose

 

Yes

 

Visual

'line-break'

normal | strict

normal

 

Yes

 

Visual

'text-autospace'

none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space

none

 

No

 

Visual

'text-justify'

auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

auto

 

Yes

 

Visual

'text-kashida-space'

<percentage> | inherit

0%

 

Yes

 

Visual

'text-underline-position'

above | below | auto | auto-pos

auto

 

Yes

 

visual

'word-break'

normal | break-all | keep-all

normal

 

Yes

 

Visual

'word-wrap'

normal | break-word

normal

 

Yes

 

Visual

'writing-mode'

lr-tb | tb-rl

lr-tb

 

No

 

Visual


Table B.3. Mozilla CSS property extensions

Name

Values

Initial value

Applies to (Default: all)

Inherited?

'-moz-appearance'

none | button | button-small | checkbox | checkbox-container | checkbox-small | dialog | listbox | menu | menuitem | menulist | menulist-button | menulist-textfield| progressbar | radio | radio-container | radio-small | resizer| scrollbar | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbartrack-horizontal | scrollbartrack-vertical | separator | statusbar | tab | tab-left-edge | tabpanels | textfield | toolbar | toolbarbutton | toolbox | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | treeview | window

none

 

No

'-moz-binding'

uri | none

none

 

No

'-moz-background-clip'

border | padding

border

 

No

'-moz-background-inline-policy'

bounding-box | continuous | each-box

continuous

Inline elements

No

'-moz-background-origin'

border | padding | content

padding

 

No

'-moz-background-image'

[ <uri> | none] | [number | <percentage>]

[ stretch | repeat | round ]

none | <image>

[ <number> | <percentage> ]

[ <border-width> ]

[ stretch | repeat | round ]

none

 

No

'-moz-border-bottom-colors'

'-moz-border-left-colors'

'-moz-border-right-colors'

'-moz-border-top-colors'

<color> | transparent

N/A

 

No

'-moz-border-radius'

<length> | <percentage>

0

 

No

'-moz-border-radius-bottomleft'

'-moz-border-radius-bottomright'

'-moz-border-radius-topleft'

'-moz-border-radius-topright'

<length> | <percentage>

0

 

No

'-moz-box-align'

start | center | end | baseline | stretch

stretch

Elements with a CSS display value of -moz-box or -moz-inline-box

No

'-moz-box-direction'

normal | reverse

normal

Elements with a CSS display value of -moz-box or -moz-inline-box

No

'-moz-box-flex'

0 | >0

0

Elements with a CSS display value of -moz-box or -moz-inline-box

No

'-moz-box-orient'

horizontal | vertical

horizontal

Elements with a CSS display value of -moz-box or -moz-inline-box

No

'-moz-box-pack'

start | center | end | justify

start

Elements with a CSS display value of -moz-box or -moz-inline-box

No

'-moz-box-shadow'

none | [ <color> <length> <length> <length> <length> | <length> <length> <length> <length>? <color> ] | inherit

none

 

No

'-moz-box-sizing'

content-box | border-box | padding box

content-box

 

No

'-moz-image-region'

For rect() values, a rect consisting of four computed lengths

auto

XUL image elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements

Yes

'-moz-opacity'

0 (or less) | 0<number<1 | 1 (or more)

1

 

No

'-moz-outline'

-moz-outline-color | -moz-outline-style | -moz-outline-width

See individual properties

 

No

'-moz-outline-color'

<color> | invert

invert

 

No

'-moz-outline-offset'

<number>

0

 

No

'-moz-outline-radius'

<length> | <percentage>

0

 

No

'-moz-outline-radius-bottomleft'

'-moz-outline-radius-bottomright'

'-moz-outline-radius-topleft'

'-moz-outline-radius-topright'

<length> | <percentage>

0

 

No

'-moz-outline-style'

none | dotted | dashed | solid | double | groove | ridge | inset | outset

none

 

No

'-moz-outline-width'

<width>

medium

 

No

'-moz-user-focus'

ignore | normal

   

'-moz-outline-input'

none | enabled | disabled | inherit

none

 

Yes

'-moz-outline-select'

none | text | -moz-none

  

No

'-moz-window-shadow'

default | none

default

All elements that make native windows; e.g., window, panel

No

If you enjoyed this excerpt, buy a copy of CSS Cookbook, Third Edition

Copyright © 2009 O'Reilly Media, Inc.