CSS2 Reference

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS2 Reference

The links in the "Property" column point to more useful information about each property.

- Background
- Border
- Classification
- Dimension
- Font

- Generated Content
- List and Marker
- Margin
- Outlines
- Padding

- Positioning
- Table
- Text
- Pseudo-classes
- Pseudo-elements

Browser support: IE: Internet Explorer, M: Mac IE only, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

## Background

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
background | A shorthand property for setting all background properties in one declaration | background-color background-image background-repeat background-attachment background-position | 4 | 1 | 6 | 1
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed | 4 | 1 | 6 | 1
background-color | Sets the background color of an element | color-rgb color-hex color-name transparent | 4 | 1 | 4 | 1
background-image | Sets an image as the background | url(URL) none | 4 | 1 | 4 | 1

background-position

Sets the starting position of a background image

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

4

1

6

1

background-repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat | 4 | 1 | 4 | 1

## Border

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
border | A shorthand property for setting all of the properties for the four borders in one declaration | border-width border-style border-color | 4 | 1 | 4 | 1
border-bottom | A shorthand property for setting all of the properties for the bottom border in one declaration | border-bottom-width border-style border-color | 4 | 1 | 6 | 1
border-bottom-color | Sets the color of the bottom border | border-color | 4 | 1 | 6 | 2
border-bottom-style | Sets the style of the bottom border | border-style | 4 | 1 | 6 | 2
border-bottom-width | Sets the width of the bottom border | thin medium thick length | 4 | 1 | 4 | 1
border-color | Sets the color of the four borders, can have from one to four colors | color | 4 | 1 | 6 | 1
border-left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width border-style border-color | 4 | 1 | 6 | 1
border-left-color | Sets the color of the left border | border-color | 4 | 1 | 6 | 2
border-left-style | Sets the style of the left border | border-style | 4 | 1 | 6 | 2
border-left-width | Sets the width of the left border | thin medium thick length | 4 | 1 | 4 | 1
border-right | A shorthand property for setting all of the properties for the right border in one declaration | border-right-width border-style border-color | 4 | 1 | 6 | 1
border-right-color | Sets the color of the right border | border-color | 4 | 1 | 6 | 2
border-right-style | Sets the style of the right border | border-style | 4 | 1 | 6 | 2
border-right-width | Sets the width of the right border | thin medium thick length | 4 | 1 | 4 | 1

border-style

Sets the style of the four borders, can have from one to four styles

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

4

1

6

1

border-top | A shorthand property for setting all of the properties for the top border in one declaration | border-top-width border-style border-color | 4 | 1 | 6 | 1
border-top-color | Sets the color of the top border | border-color | 4 | 1 | 6 | 2
border-top-style | Sets the style of the top border | border-style | 4 | 1 | 6 | 2
border-top-width | Sets the width of the top border | thin medium thick length | 4 | 1 | 4 | 1
border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | thin medium thick length | 4 | 1 | 4 | 1

## Classification

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
clear | Sets the sides of an element where other floating elements are not allowed | left right both none | 4 | 1 | 4 | 1

cursor

Specifies the type of cursor to be displayed

url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

4

1

6

2

display

Sets how/if an element is displayed

none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption

4

1

4

1

float | Sets where an image or a text will appear in another element | left right none | 4 | 1 | 4 | 1
position | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
visibility | Sets if an element should be visible or invisible | visible hidden collapse | 4 | 1 | 6 | 2

## Dimension

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
height | Sets the height of an element | auto length % | 4 | 1 | 6 | 1
line-height | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
max-height | Sets the maximum height of an element | none length % | - | 1 | 6 | 2
max-width | Sets the maximum width of an element | none length % | - | 1 | 6 | 2
min-height | Sets the minimum height of an element | length % | - | 1 | 6 | 2
min-width | Sets the minimum width of an element | length % | - | 1 | 6 | 2
width | Sets the width of an element | auto % length | 4 | 1 | 4 | 1

## Font

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---

font

A shorthand property for setting all of the properties for a font in one declaration

font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

4

1

4

1

font-family | A prioritized list of font family names and/or generic family names for an element | family-name generic-family | 3 | 1 | 4 | 1

font-size

Sets the size of a font

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

3

1

4

1

font-size-adjust | Specifies an aspect value for an element that will preserve the x-height of the first-choice font | none number | - | 1 | - | 2

font-stretch

Condenses or expands the current font-family

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

-

-

-

2

font-style | Sets the style of the font | normal italic oblique | 4 | 1 | 4 | 1
font-variant | Displays text in a small-caps font or a normal font | normal small-caps | 4 | 1 | 6 | 1

font-weight

Sets the weight of a font

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

4

1

4

1

## Generated Content

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---

content

Generates content in a document. Used with the :before and :after pseudo-elements

string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote

1

6

2

counter-increment | Sets how much the counter increments on each occurrence of a selector | none identifier number |  |  |  | 2
counter-reset | Sets the value the counter is set to on each occurrence of a selector | none identifier number |  |  |  | 2
quotes | Sets the type of quotation marks | none string string | - | 1 | 6 | 2

## List and Marker

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
list-style | A shorthand property for setting all of the properties for a list in one declaration | list-style-type list-style-position list-style-image | 4 | 1 | 6 | 1
list-style-image | Sets an image as the list-item marker | none url | 4 | 1 | 6 | 1
list-style-position | Sets where the list-item marker is placed in the list | inside outside | 4 | 1 | 6 | 1

list-style-type

Sets the type of the list-item marker

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

4

1

4

1

marker-offset |  | auto length |  | 1 | 7 | 2

## Margin

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
margin | A shorthand property for setting the margin properties in one declaration | margin-top margin-right margin-bottom margin-left | 4 | 1 | 4 | 1
margin-bottom | Sets the bottom margin of an element | auto length % | 4 | 1 | 4 | 1
margin-left | Sets the left margin of an element | auto length % | 3 | 1 | 4 | 1
margin-right | Sets the right margin of an element | auto length % | 3 | 1 | 4 | 1
margin-top | Sets the top margin of an element | auto length % | 3 | 1 | 4 | 1

## Outlines

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
outline | A shorthand property for setting all the outline properties in one declaration | outline-color outline-style outline-width | - | 1.5 | - | 2
outline-color | Sets the color of the outline around an element | color invert | - | 1.5 | - | 2

outline-style

Sets the style of the outline around an element

none
dotted
dashed
solid
double
groove
ridge
inset
outset

-

1.5

-

2

outline-width | Sets the width of the outline around an element | thin medium thick length | - | 1.5 | - | 2

## Padding

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
padding | A shorthand property for setting all of the padding properties in one declaration | padding-top padding-right padding-bottom padding-left | 4 | 1 | 4 | 1
padding-bottom | Sets the bottom padding of an element | length % | 4 | 1 | 4 | 1
padding-left | Sets the left padding of an element | length % | 4 | 1 | 4 | 1
padding-right | Sets the right padding of an element | length % | 4 | 1 | 4 | 1
padding-top | Sets the top padding of an element | length % | 4 | 1 | 4 | 1

## Positioning

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | auto % length | 5 | 1 | 6 | 2
clip | Sets the shape of an element. The element is clipped into this shape, and displayed | shape auto | 4 | 1 | 6 | 2
left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | auto % length | 4 | 1 | 4 | 2
overflow | Sets what happens if the content of an element overflow its area | visible hidden scroll auto | 4 | 1 | 6 | 2
position | Places an element in a static, relative, absolute or fixed position | static relative absolute fixed | 4 | 1 | 4 | 2
right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | auto % length | 5 | 1 | 6 | 2
top | Sets how far the top edge of an element is above/below the top edge of the parent element | auto % length | 4 | 1 | 4 | 2

vertical-align

Sets the vertical alignment of an element

baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%

4

1

4

1

z-index | Sets the stack order of an element | auto number | 4 | 1 | 6 | 2

## Table

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
border-collapse | Sets whether the table borders are collapsed into a single border or detached as in standard HTML | collapse separate | 5 | 1 | 7 | 2
border-spacing | Sets the distance that separates cell borders (only for the "separated borders" model) | length length | 5M | 1 | 6 | 2
caption-side | Sets the position of the table caption | top bottom left right | 5M | 1 | 6 | 2
empty-cells | Sets whether or not to show empty cells in a table (only for the "separated borders" model) | show hide | 5M | 1 | 6 | 2
table-layout | Sets the algorithm used to display the table cells, rows, and columns | auto fixed | 5 | 1 | 6 | 2

## Text

Property | Description | Values | IE | F | N | W3C
--- | --- | --- | --- | --- | --- | ---
color | Sets the color of a text | color | 3 | 1 | 4 | 1
direction | Sets the text direction | ltr rtl | 6 | 1 | 6 | 2
line-height | Sets the distance between lines | normal number length % | 4 | 1 | 4 | 1
letter-spacing | Increase or decrease the space between characters | normal length | 4 | 1 | 6 | 1
text-align | Aligns the text in an element | left right center justify | 4 | 1 | 4 | 1
text-decoration | Adds decoration to text | none underline overline line-through blink | 4 | 1 | 4 | 1
text-indent | Indents the first line of text in an element | length % | 4 | 1 | 4 | 1
text-shadow |  | none color length |  |  |  |
text-transform | Controls the letters in an element | none capitalize uppercase lowercase | 4 | 1 | 4 | 1
unicode-bidi |  | normal embed bidi-override | 5 |  |  | 2
white-space | Sets how white space inside an element is handled | normal pre nowrap | 5 | 1 | 4 | 1
word-spacing | Increase or decrease the space between words | normal length | 6 | 1 | 6 | 1

## Pseudo-classes

Pseudo-class | Purpose | IE | F | N | W3C
--- | --- | --- | --- | --- | ---
:active | Adds special style to an activated element | 4 | 1 | 8 | 1
:focus | Adds special style to an element while the element has focus | - | 1.5 | 8 | 2
:hover | Adds special style to an element when you mouse over it | 4 | 1 | 7 | 1
:link | Adds special style to an unvisited link | 3 | 1 | 4 | 1
:visited | Adds special style to a visited link | 3 | 1 | 4 | 1
:first-child | Adds special style to an element that is the first child of some other element | - | 1 | 7 | 2
:lang | Allows the author to specify a language to use in a specified element | - | 1 | 8 | 2

## Pseudo-elements

Pseudo-element | Purpose | IE | F | N | W3C
--- | --- | --- | --- | --- | ---
:first-letter | Adds special style to the first letter of a text | 5 | 1 | 8 | 1
:first-line | Adds special style to the first line of a text | 5 | 1 | 8 | 1
:before | Inserts some content before an element |  | 1.5 | 8 | 2
:after | Inserts some content after an element |  | 1.5 | 8 | 2

From http://www.w3schools.com (Copyright Refsnes Data)