Appendix C. Cascading Style Sheet Properties Quick Reference

Appendix C. Cascading Style Sheet Properties Quick Reference

In the following table, we list, in alphabetical order, all the properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2 (http://www.w3.org/pub/WWW/TR/REC-CSS2/).

As in other sections of this book, we use the Netscape and Internet Explorer icons to the far right of each property to show which browser supports that property. Properties with no icons currently are not supported by any browser. We also include the number of the section in this book that fully defines the property.

We include each property's possible values, defined as either an explicit keyword (shown in constant width) or as one of these values:

angle

A numeric value followed by deg, grad, or rad.

color

Either a color name or hexadecimal RGB value, as defined in Appendix G, or an RGB triple of the form:

rgb(red, green, blue)

where red, green, and blue are either numbers in the range 0 to 255 or percentage values indicating the brightness of that color component. Values of 255 or 100% indicate that the corresponding color component is at its brightest; values of 0 or 0% indicate that the corresponding color component is turned off completely. For example:

rgb(27, 119, 207)

rgb(50%, 75%, 0%)

are both valid color specifications.

frequency

A numeric value followed by hz or khz, indicating Hertz or kiloHertz.

length

An optional sign (either + or -), immediately followed by a number (with or without a decimal point), immediately followed by a two-character unit identifier. For values of zero, the unit identifier may be omitted.

The unit identifiers em and ex refer to the overall height of the font and to the height of the letter "x," respectively. The unit identifier px is equal to a single pixel on the display device. The unit identifiers in, cm, mm, pt, and pc refer to inches, centimeters, millimeters, points, and picas, respectively. There are 72.27 points per inch and 12 points in a pica.

number

An optional sign, immediately followed by a number (with or without a decimal point).

percent

An optional sign, immediately followed by a number (with or without a decimal point), immediately followed by a percent sign. The actual value is computed as a percentage of some other element property, usually the element's size.

shape

A shape keyword, followed by a parentheses-enclosed list of comma-separated shape-specific parameters. Currently, the only supported shape keyword is rect, which expects four numeric parameters denoting the offsets of the top, right, bottom, and left edges of the rectangle.

time

A numeric value followed by s or ms, designating a time in seconds or milliseconds.

url

The keyword url, immediately followed (no spaces) by a left parenthesis, followed by a URL optionally enclosed in single or double quotes, followed by a matching right parenthesis. For example:

url("http://www.oreilly.com/catalog")

is a valid URL value.

Finally, some values are lists of other values and are described as a "list of" some other value. In these cases, a list consists of one or more of the allowed values, separated by commas.

If there are several different values allowed for a property, these alternative choices are separated by vertical bars (|).

If the standard defines a default value for the property, that value is underlined.



azimuth

angle | left-side | far-left | left | center-left | center | center-right | right | far-right | right-side

Determines the position around the listener at which a sound is played

Section 8.4.12.7

 
background
 

Composite property for the background-attachment,background-color, background-image, background-position, and background-repeat properties; value is any of these properties' values, in any order

Section 8.4.5.6

figs/n.gif figs/i.gif

background-

attachment

scroll | fixed

Determines if the background image is fixed in the window or scrolls as the document scrolls

Section 8.4.5.1

figs/n.gif figs/i.gif

background-color

color | transparent

Sets the background color of an element

Section 8.4.5.2

figs/n.gif figs/i.gif

background-image

url | none

Sets the background image of an element

Section 8.4.5.3

figs/n.gif figs/i.gif

background-position

percent | length | top | center | bottom | left | right

Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%

Section 8.4.5.4

figs/n.gif figs/i.gif

background-repeat

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

Determines how the background image is repeated (tiled) across an element

Section 8.4.5.5

figs/n.gif figs/i.gif

border
 

Sets all four of an element's borders; value is one or more of a color, a value for border-width, and a value for border-style

Section 8.4.7.6

figs/n.gif figs/i.gif

border-bottom
 

Sets an element's bottom border; value is one or more of a color, a value for border-bottom-width, and a value for border-style

Section 8.4.7.6

figs/n.gif figs/i.gif

border-bottom-width

length | thin | medium | thick

Sets the thickness of an element's bottom border

Section 8.4.7.4

figs/n.gif figs/i.gif

border-collapse

collapse | separate

Sets the table border rendering algorithm

Section 8.4.9.1

 
border-color

color

Sets the color of all four of an element's borders; default is the color of the element

Section 8.4.7.3

figs/n.gif figs/i.gif

border-left
 

Sets an element's left border; value is one or more of a color, a value for border-left-width, and a value for border-style

Section 8.4.7.6

figs/n.gif figs/i.gif

border-left-width

length | thin | medium | thick

Sets the thickness of an element's left border

Section 8.4.7.4

figs/n.gif figs/i.gif

border-right
 

Sets an element's right border; value is one or more of a color, a value for border-right-width, and a value for border-style

Section 8.4.7.6

figs/n.gif figs/i.gif

border-right-width

length | thin | medium | thick

Sets the thickness of an element's right border

Section 8.4.7.4

figs/n.gif figs/i.gif

border-spacing
 

With separate borders, sets the spacing between borders ? one value sets vertical and horizontal spacing; two values sets horizontal and vertical spacing, respectively

Section 8.4.9.1

 
border-style

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

Sets the style of all four of an element's borders

Section 8.4.7.5

figs/n.gif figs/i.gif

border-top
 

Sets an element's top border; value is one or more of a color, a value for border-top-width, and a value for border-style

Section 8.4.7.6

figs/n.gif figs/i.gif

border-top-width

length | thin | medium | thick

Sets the thickness of an element's top border

Section 8.4.7.4

figs/n.gif figs/i.gif

border-width

length | thin | medium | thick

Sets the thickness of all four of an element's borders

Section 8.4.7.4

figs/n.gif figs/i.gif

bottom

length | percent

Used with the position property to place the bottom edge of an element

Section 8.4.7.14

 
caption-side

top | bottom | left | right

Sets the position for a table caption

Section 8.4.9.2

 
clear

both | left | none | right

Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear

Section 8.4.7.7

figs/n.gif figs/i.gif

clip

shape

Sets the clipping mask for an element

Section 8.4.7.8

 
color

color

Sets the color of an element

Section 8.4.5.7

figs/n.gif figs/i.gif

content
 

Inserts generated content around an element; see text for details

Section 8.4.11.2

 
counter-increment
 

Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented

Section 8.4.11.4

 
counter-reset
 

Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset

Section 8.4.11.4

 
cue-after

url | none

Plays the designated sound after an element is spoken

Section 8.4.12.5

 
cue-before

url | none

Plays the designated sound before an element is spoken

Section 8.4.12.5

 
display

block | inline | list-item | marker | none

Controls how an element is displayed

Section 8.4.10.1

figs/n.gif figs/i.gif

elevation

angle | below | level | above | higher | lower

Sets the height at which a sound is played

Section 8.4.12.7

 
empty-cells

hide | show

With separate borders, hides empty cells in a table

Section 8.4.9.1

 
float

left | none | right

Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline (using none)

Section 8.4.7.9

figs/n.gif figs/i.gif

font
 

Sets all the font attributes for an element; value is any of the values for font-style, font-variant, font-weight, font-size, line-height, and font-family, in that order

Section 8.4.3.8

figs/n.gif figs/i.gif

font-family

List of font names

Defines the font for an element, either as a specific font or as one of the generic fonts serif, sans-serif, cursive, fantasy, and monospace

Section 8.4.3.1

figs/n.gif figs/i.gif

font-size

xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length | percent

Defines the font size

Section 8.4.3.2

figs/n.gif figs/i.gif

font-size-adjust

none | ratio

Adjusts the current font's aspect ratio

Section 8.4.3.4

 
font-stretch

wider | normal | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Determines the amount to stretch the current font

Section 8.4.3.3

 
font-style

normal | italic | oblique

Defines the style of the face, either normal or some type of slanted style

Section 8.4.3.5

figs/n.gif figs/i.gif

font-variant

normal | small-caps

Defines a font to be in small caps

Section 8.4.3.6

figs/i.gif

font-weight

normal | bold | bolder | lighter | number

Defines the font weight ? if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold

Section 8.4.3.7

figs/n.gif figs/i.gif

height

length | auto

Defines the height of an element

Section 8.4.7.10

figs/n.gif figs/i.gif

left

length | percent

Used with the position property to place the left edge of an element

Section 8.4.7.14

 
letter-spacing

length | normal

Inserts additional space between text characters

Section 8.4.6.1

figs/n.gif figs/i.gif

line-height

length | number | percent | normal

Sets the distance between adjacent text baselines

Section 8.4.6.2

figs/n.gif figs/i.gif

list-style
 

Defines list-related styles using any of the values for list-style-image, list-style-position, and list-style-type

Section 8.4.8.4

figs/n.gif figs/i.gif

list-style-image

url | none

Defines an image to be used as a list item's marker, in lieu of the value for list-style-type

Section 8.4.8.1

figs/n.gif figs/i.gif

list-style-position

inside | outside

Indents or extends (default) a list item's marker with respect to the item's content

Section 8.4.8.2

 
list-style-type

circle | disc | square | decimal | lower-alpha | lower-roman | none | upper-alpha | upper-roman

Defines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, lower-alpha, lower-roman, none, upper-alpha, or upper-roman)

Section 8.4.8.3

figs/n.gif figs/i.gif

margin

length | percent | auto

Defines all four of an element's margins

Section 8.4.7.11

figs/n.gif figs/i.gif

margin-bottom

length | percent | auto

Defines the bottom margin of an element; default value is 0

Section 8.4.7.11

figs/n.gif figs/i.gif

margin-left

length | percent | auto

Defines the left margin of an element; default value is 0

Section 8.4.7.11

figs/n.gif figs/i.gif

margin-right

length | percent | auto

Defines the right margin of an element; default value is 0

Section 8.4.7.11

figs/n.gif figs/i.gif

margin-top

length | percent | auto

Defines the top margin of an element; default value is 0

Section 8.4.7.11

figs/n.gif figs/i.gif

orphans

number

Sets the minimum number of lines allowed in an orphaned paragraph fragment

Section 8.4.13.5

 
overflow

auto | hidden | scroll | visible

Determines how overflow content is rendered

Section 8.4.7.13

 
padding
 

Defines all four padding amounts around an element

Section 8.4.7.12

figs/n.gif figs/i.gif

padding-bottom

length | percent

Defines the bottom padding of an element; default value is 0

Section 8.4.7.12

figs/n.gif figs/i.gif

padding-left

length | percent

Defines the left padding of an element; default value is 0

Section 8.4.7.12

figs/n.gif figs/i.gif

padding-right

length | percent

Defines the right padding of an element; default value is 0

Section 8.4.7.12

figs/n.gif figs/i.gif

padding-top

length | percent

Defines the top padding of an element; default value is 0

Section 8.4.7.12

figs/n.gif figs/i.gif

page

name

Associates a named page layout with an element

Section 8.4.13.3

 
page-break-after

auto | always | avoid | left | right

Forces or suppresses page breaks after an element

Section 8.4.13.4

 
page-break-before

auto | always | avoid | left | right

Forces or suppresses page breaks before an element

Section 8.4.13.4

 
page-break-inside

auto | avoid

Suppresses page breaks within an element

Section 8.4.13.4

 
pause-after

percent | time

Pauses after speaking an element

Section 8.4.12.4

 
pause-before

percent | time

Pauses before speaking an element

Section 8.4.12.4

 
pitch

frequency | x-low | low | medium | high | x-high

Sets the average pitch of an element's spoken content

Section 8.4.12.3

 
pitch-range

number

Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50

Section 8.4.12.3

 
play-during

url | mix | none | repeat

If a URL is provided, it is played during an element's spoken content ? specifying repeat loops the audio; mix causes it to mix with, rather than replace, other background audio

Section 8.4.12.6

 
position

absolute | fixed | relative | static

Sets the positioning model for an element

Section 8.4.7.14

 
quotes

List of strings

Sets the quote symbols used to quote text

Section 8.4.11.3

 
richness

number

Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50

Section 8.4.12.3

 
right

length | percent

Used with the position property to place the right edge of an element

Section 8.4.7.14

 
speak

normal | none | spell-out

Determines how an element's content is spoken

Section 8.4.12.2

 
speak-header

always | once

Determines if table headers are spoken once for each row or column or each time a cell is spoken

Section 8.4.9.3

 
speak-numeral

continuous | digits

Determines how numerals are spoken

Section 8.4.12.2

 
speak-punctuation

code | none

Determines if punctuation is spoken or used for inflection

Section 8.4.12.2

 
speech-rate

number | x-slow | slow | medium | fast | x-fast | faster | slower

Sets the rate of speech; a number sets the rate in words per minute

Section 8.4.12.3

 
stress

number

Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50

Section 8.4.12.3

 
table-layout

auto | fixed

Determines the table-rendering algorithm

Section 8.4.9.4

 
text-align

center | justify | left | right

Sets the text alignment style for an element

Section 8.4.6.3

figs/n.gif figs/i.gif

text-decoration

blink | line-through | none | overline | underline

Defines any decoration for the text; values may be combined

Section 8.4.6.4

figs/n.gif figs/i.gif

text-indent

length | percent

Defines the indentation of the first line of text in an element; default is 0

Section 8.4.6.5

figs/n.gif figs/i.gif

text-shadow

See text

Creates text drop shadows of varying colors and offsets

Section 8.4.6.6

 
text-transform

capitalize | lowercase | none | uppercase

Transforms the text in the element accordingly

Section 8.4.6.7

figs/n.gif figs/i.gif

top

length | percent

Used with the position property to place the top edge of an element

Section 8.4.7.14

 
vertical-align

percent | baseline | bottom | middle | sub | super | text-bottom | text-top | top

Sets the vertical positioning of an element

Section 8.4.6.8

figs/n.gif figs/i.gif

visibility

collapse | hidden | visible

Determines if an element is visible in the document or table

Section 8.4.7.15

 
voice-family

List of voices

Selects a named voice family to speak an element's content

Section 8.4.12.3

 
volume

number | percent | silent | x-soft | soft | medium | loud | x-loud

Sets the volume of spoken content; numeric values range from 0 to 100

Section 8.4.12.1

 
white-space

normal | nowrap | pre

Defines how whitespace within an element is handled

Section 8.4.10.2

figs/n.gif

widows

number

Sets the minimum number of lines allowed in a widowed paragraph fragment

Section 8.4.13.5

 
width

length | percent | auto

Defines the width of an element

Section 8.4.7.16

figs/n.gif figs/i.gif

word-spacing

length | normal

Inserts additional space between words

Section 8.4.6.9

figs/n.gif