back

CSS1-Properties
Quick Reference Table

by Joachim Schwarte - April 21st 1997

eMail: schwarte@iwb.uni-stuttgart.de
http://iwb.uni-stuttgart.de/~schwarte/js.htm
http://home.t-online.de/home/joachim.schwarte
http://129.69.59.141

 

based on:

 

Cascading Style Sheets, level 1
W3C Recommendation 17 Dec 1996

(REC-CSS1-961217)

 

Positioning HTML Elements with
Cascading Style Sheets
W3C Working Draft 31-Jan-1997

(WD-positioning-970131)

 

CSS Printing Extensions
W3C Working Draft 31-March-97

(WD-print-970331)

 

 

 

Contents:

 

1. CSS1-Properties

 

2. Notation for property values

 

2.1 Brackets

2.2 Separators

2.3 Modifiers

 

3 Types of values

 

 

This document may be copied and distributed freely.

 

 

1. CSS1-Properties

 

Property:

Value:

Initial:

Applies to:

Inherited:

Percentage values:

Spec. chapter

font-family

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

UA specific

all elements

yes

N/A

5.2.2

font-style

normal | italic | oblique

normal

all elements

yes

N/A

5.2.3

font-variant

normal | small-caps

normal

all elements

yes

N/A

5.2.4

font-weight

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

normal

all elements

yes

N/A

5.2.5

font-size

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

medium

all elements

yes

relative to parent element's font size

5.2.6

font

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

not defined for shorthand properties

all elements

yes

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

5.2.7

color

<color>

UA specific

all elements

yes

N/A

5.3.1

background-color

<color> | transparent

transparent

all elements

no

N/A

5.3.2

background-image

<url> | none

none

all elements

no

N/A

5.3.3

background-repeat

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

repeat

all elements

no

N/A

5.3.4

background-attachment

scroll | fixed

scroll

all elements

no

N/A

5.3.5

background-position

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

0% 0%

block-level and replaced elements

no

refer to the size of the element itself

5.3.6

background

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

not defined for shorthand properties

all elements

no

allowed on <background-position>

5.3.7

word-spacing

normal | <length>

normal

all elements

yes

N/A

5.4.1

letter-spacing

normal | <length>

normal

all elements

yes

N/A

5.4.2

text-decoration

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

none

all elements

no **

N/A

5.4.3

vertical-align

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

baseline

inline elements

no

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

5.4.4

text-transform

capitalize | uppercase | lowercase | none

none

all elements

yes

N/A

5.4.5

text-align

left | right | center | justify

UA specific

block-level elements

yes

N/A

5.4.6

text-indent

<length> | <percentage>

0

block-level elements

yes

refer to parent element's width

5.4.7

line-height

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

normal

all elements

yes

relative to the font size of the element itself

5.4.8

margin-top

<length> | <percentage> | auto

0

all elements

no

refer to parent element's width

5.5.1

margin-right

<length> | <percentage> | auto

0

all elements

no

refer to parent element's width

5.5.2

margin-bottom

<length> | <percentage> | auto

0

all elements

no

refer to parent element's width

5.5.3

margin-left

<length> | <percentage> | auto

0

all elements

no

refer to parent element's width

5.5.4

margin

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

not defined for shorthand properties

all elements

no

refer to parent element's width

5.5.5

padding-top

<length> | <percentage>

0

all elements

no

refer to parent element's width

5.5.6

padding-right

<length> | <percentage>

0

all elements

no

refer to parent element's width

5.5.7

padding-bottom

<length> | <percentage>

0

all elements

no

refer to parent element's width

5.5.8

padding-left

<length> | <percentage>

0

all elements

no

refer to parent element's width

5.5.9

padding

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

0

all elements

no

refer to parent element's width

5.5.10

border-top-width

thin | medium | thick | <length>

'medium'

all elements

no

N/A

5.5.11

border-right-width

thin | medium | thick | <length>

'medium'

all elements

no

N/A

5.5.12

border-bottom-width

thin | medium | thick | <length>

'medium'

all elements

no

N/A

5.5.13

border-left-width

thin | medium | thick | <length>

'medium'

all elements

no

N/A

5.5.14

border-width

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

not defined for shorthand properties

all elements

no

N/A

5.5.15

border-color

<color>{1,4}

the value of the 'color' property

all elements

no

N/A

5.5.16

border-style

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

none

all elements

no

N/A

5.5.17

border-top

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

not defined for shorthand properties

all elements

no

N/A

5.5.18

border-right

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

not defined for shorthand properties

all elements

no

N/A

5.5.19

border-bottom

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

not defined for shorthand properties

all elements

no

N/A

5.5.20

border-left

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

not defined for shorthand properties

all elements

no

N/A

5.5.21

border

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

not defined for shorthand properties

all elements

no

N/A

5.5.22

width *

<length> | <percentage> | auto

auto

block-level and replaced elements

no

refer to parent element's width

5.5.23

height *

<length> | auto

auto

block-level and replaced elements

no

N/A

5.5.24

float

left | right | none

none

all elements

no

N/A

5.5.25

clear

none | left | right | both

none

all elements

no

N/A

5.5.26

display

block | inline | list-item | none

block

all elements

no

N/A

5.6.1

white-space

normal | pre | nowrap

normal

block-level elements

yes

N/A

5.6.2

list-style-type

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

disc

elements with 'display' value 'list-item'

yes

N/A

5.6.3

list-style-image

<url> | none

none

elements with 'display' value 'list-item'

yes

N/A

5.6.4

list-style-position

inside | outside

outside

elements with 'display' value 'list-item'

yes

N/A

5.6.5

list-style

<keyword> || <position> || <url>

not defined for shorthand properties

elements with 'display' value 'list-item'

yes

N/A

5.6.6

position

absolute | relative | static

static

all elements

no

N/A

WD-positioning

left

<length> | <percentage> | auto

auto

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

no

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

WD-positioning

top

<length> | <percentage> | auto

auto

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

no

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

WD-positioning

width *

<length> | <percentage> | auto

auto

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

no

refer to parent element's width.

WD-positioning

height *

<length> | <percentage> | auto

auto

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

no

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

WD-positioning

clip

<shape> | auto

auto

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

no

N/A

WD-positioning

overflow

none | clip | scroll

none

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

no

N/A

WD-positioning

z-index

auto | <integer>

auto

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

no

N/A

WD-positioning

visibility

inherit | visible | hidden

inherit

all elements

if value is 'inherit'

N/A

WD-positioning

page-break-before

auto | allways | left | right

auto

block-level elements outside of tables

no

N/A

WD-print

page-break-after

auto | allways | left | right

auto

block-level elements outside of tables

no

N/A

WD-print

size

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

auto

page context

N/A

N/A

WD-print

marks

crop || cross | none

none

page context

N/A

N/A

WD-print

* 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).

2. Notation for property values

 

2.1 Brackets

 

Bracket type

Meaning

 

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.

(see section 3.)

[ ... ]

Grouping

{ ... }

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

 

2.2 Separators

 

Separator

Meaning

 

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.

 

2.3 Modifiers

 

Modifier

Meaning

*

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,B}

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.

 

3 Types of values

 

Type of value

Meaning

<absolute-size>

An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible vaues are: [xx-small | x-small | small | medium | large | x-large | xx-large]

<background-attachment>

Any value of the property background-attachment.

<background-color>

Any value of the property background-color.

<background-image>

Any value of the property background-image.

<background-position>

Any value of the property background-position.

<background-repeat>

Any value of the property background-repeat.

<border-bottom-width>

Any value of the property border-bottom-width.

<border-left-width>

Any value of the property border-left-width.

<border-right-width>

Any value of the property border-right-width.

<border-style>

Any value of the property border-style.

<border-top-width>

Any value of the property border-top-width.

<border-width>

Any value of the property border-width.

<bottom>

Possible values: [auto | <length>]

<color>

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.

<family-name>

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

<font-family>

Any value of the property font-family.

<font-size>

Any value of the property font-size.

<font-style>

Any value of the property font-style.

<font-variant>

Any value of the property font-variant.

<font-weight>

Any value of the property font-weight.

<generic-family>

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)

<integer>

Any integer value

<keyword>

Any value of the property list-style-type.

<left>

Possible values: [auto | <length>]

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

<line-height>

Any value of the property line-height.

<number>

Any numerical value

<percentage>

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 ´%´.

<position>

Any value of the property list-style-position.

<relative-size>

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]

<right>

Possible values: [auto | <length>]

<shape>

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

<top>

Possible values: [auto | <length>]

<url>

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.