CSS1 Quick Reference - San Diego Web Design

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

normal | italic | oblique

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

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

relative to parent element's font size

[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

not defined for shorthand properties

allowed on <font-size> and <line-height>

<color> | transparent

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

background-attachment

[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

block-level and replaced elements

refer to the size of the element itself

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

not defined for shorthand properties

allowed on <background-position>

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

refer to the 'line-height' of the element itself

capitalize | uppercase | lowercase | none

left | right | center | justify

block-level elements

block-level elements

refer to parent element's width

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

relative to the font size of the element itself

<length> | <percentage> | auto

refer to parent element's width

<length> | <percentage> | auto

refer to parent element's width

<length> | <percentage> | auto

refer to parent element's width

<length> | <percentage> | auto

refer to parent element's width

[ <length> | <percentage> | auto ]{1,4}

not defined for shorthand properties

refer to parent element's width

refer to parent element's width

refer to parent element's width

refer to parent element's width

refer to parent element's width

[ <length> | <percentage> ]{1,4}

refer to parent element's width

thin | medium | thick | <length>

[thin | medium | thick | <length>]{1,4}

not defined for shorthand properties

the value of the 'color' property

<border-top-width> || <border-style> || <color>

not defined for shorthand properties

<border-right-width> || <border-style> || <color>

not defined for shorthand properties

<border-bottom-width> || <border-style> || <color>

not defined for shorthand properties

<border-left-width> || <border-style> || <color>

not defined for shorthand properties

<border-width> || <border-style> || <color>

not defined for shorthand properties

<length> | <percentage> | auto

block-level and replaced elements

refer to parent element's width

block-level and replaced elements

none | left | right | both

block | inline | list-item | none

normal | pre | nowrap

block-level elements

elements with 'display' value 'list-item'

not defined for shorthand properties

elements with 'display' value 'list-item'

absolute | relative | static

<length> | <percentage> | auto

elements with the 'position' property of type 'absolute' or 'relative'

refer to parent element's width. If parent's height is set to 'auto', percentage is undefined.

<length> | <percentage> | auto

elements with the 'position' property of type 'absolute' or 'relative'

refer to parent element's height. If parent's height is set to 'auto', percentage is undefined.

<length> | <percentage> | auto

block-level and replaced elements, elements with 'position' property of type 'absolute'

refer to parent element's width.

<length> | <percentage> | auto

block-level and replaced elements, elements with 'position' property of type 'absolute'

refer to parent element's height. If parent's height is 'auto', percentage of height is undefined.

elements with the 'position' property of type 'absolute'

none | clip | scroll

elements with the 'position' property of type 'absolute' or 'relative'

inherit | visible | hidden

if value is 'inherit'

auto | allways | left | right

block-level elements outside of tables

auto | allways | left | right

block-level elements outside of tables

<length>{1,2} | auto | portrait | landscape

crop || cross | none

* The properties 'width' and 'height' are defined differently in REC-CSS1-961217 and WD-positioning-970131. For elements with 'position' of type 'relative' and 'static', the behavior of 'width' and 'height' is unchanged.

** Clarification can be found in the original documentation (REC-CSS1-961217).

Words without any brackets are keyword that must appear literally, without quotes. Those word may be used directly as values of the respective property.

Word between < and > give a type of value.

Curly braces indicate a special modifier. (see section 2.3)

Several things juxtaposed mean that all of them must accure, in the given order.

A bar separates alternatives: one of them must occure.

A double bar (A || B) means that either A or B or both must occur, in any order.

An asterisc indicates that the preceding type, word or group is repeated zero or more times.

A plus indicates that the preceding type, word or group is repeated one or more times.

A question mark indicates that the preceding type, word or group is optional

A pair of numbers in curly braces indicates that the preceding type, word or group is repeated at least A and at most B times.

<background-attachment>

Any value of the property background-attachment.

Any value of the property background-color.

Any value of the property background-image.

<background-position>

Any value of the property background-position.

Any value of the property background-repeat.

<border-bottom-width>

Any value of the property border-bottom-width.

Any value of the property border-left-width.

<border-right-width>

Any value of the property border-right-width.

Any value of the property border-style.

Any value of the property border-top-width.

Any value of the property border-width.

Possible values: [auto | <length>]

A color is either a keyword or a numerical RGB specification.

The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.

The name of a font family of choice. Example: "helvetica" and "arial" are font families.

Any value of the property font-family.

Any value of the property font-size.

Any value of the property font-style.

Any value of the property font-variant.

Any value of the property font-weight.

The folowing generic families are defined:

´serif´´ (e.g. Times)

´sans serif` (e.g. Helvetica)

´cursive´ (e.g. Zapf-Cancery)

´fantasy´ (e.g. Western)

´monospace´ (e.g. Courier)

Any value of the property list-style-type.

Possible values: [auto | <length>]

The format of a length value is an optional sign character (´+´ or ´-´, with ´+´ beeing the default) immediatly followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two letter abbreviation). After a ´0´, the unit identifier is optional.

Any value of the property line-height.

The format of a percentage value is an optional sign character (´+´ odr ´-´, with ´+´ beeing the default) immediatly followed by a number (with or without a decimal point) immediately followed by ´%´.

Any value of the property list-style-position.

A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [larger | smaller]

Possible values: [auto | <length>]

Possible values: [rect (<top> <right> <bottom> <left>)]

Possible values: [auto | <length>]

The format of a URL value is ´url´( followed by optional white space followed by an optional single quote (´) or double quote (") character followed by the URL itself followed by an optional single quote (´) or double quote (") character followed by optional white space followed by ´)´. Quote characters that are not part of the URL itself must be balanced.