Cascading Style Sheets 2 Reference

 

 

Background

Description

Values

CSS Level

background

A shorthand property for setting all background properties in one declaration

background-color
background-image
background-repeat background-attachment background-position

1

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

scroll
fixed

1

background-color

Sets the background color of an element

color-rgb
color-hex
color-name
transparent

1

background-image

Sets an image as the background

url
none

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-%
x-pos y-pos

1

background-repeat

Sets if/how a background image will be repeated

repeat
repeat-x
repeat-y
no-repeat

1

 

Border

 

 

 

border

A shorthand property for setting all of the properties for the four borders in one declaration

border-width
border-style
border-color

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

1

border-bottom-color

Sets the color of the bottom border

border-color

2

border-bottom-style

Sets the style of the bottom border

border-style

2

border-bottom-width

Sets the width of the bottom border

thin
medium
thick
length

1

border-color

Sets the color of the four borders, can have from one to four colors

color

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

1

border-left-color

Sets the color of the left border

border-color

2

border-left-style

Sets the style of the left border

border-style

2

border-left-width

Sets the width of the left border

thin
medium
thick
length

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

1

border-right-color

Sets the color of the right border

border-color

2

border-right-style

Sets the style of the right border

border-style

2

border-right-width

Sets the width of the right border

thin
medium
thick
length

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

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

1

border-top-color

Sets the color of the top border

border-color

2

border-top-style

Sets the style of the top border

border-style

2

border-top-width

Sets the width of the top border

thin
medium
thick
length

1

border-width

A shorthand property for setting the width of the four borders in one declaration, can have from one to four

thin
medium
thick
length

1

 

Classification

 

 

 

clear

Sets the sides of an element where other floating elements are not allowed

left
right
both
none

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

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

1

float

Sets where an image or a text will appear in another element

left
right
none

1

position

Places an element in a static, relative, absolute or fixed position

static
relative
absolute
fixed

2

visibility

Sets if an element should be visible or invisible

visible
hidden
collapse

2

 

Sizes

 

 

 

height

Sets the height of an element

auto
length
%

1

line-height

Sets the distance between lines

normal
number
length
%

1

max-height

Sets the maximum height of an element

none
length
%

2

max-width

Sets the maximum width of an element

none
length
%

2

min-height

Sets the minimum height of an element

length
%

2

min-width

Sets the minimum width of an element

length
%

2

width

Sets the width of an element

auto
%
length  

1

 

Fonts

 

 

 

font

A shorthand  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

1

font-family

A prioritized list of font family names and/or generic family names for an element

family-name
generic-family

1

font-size

Sets the size of a font

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

1

font-size-adjustt

Specifies an aspect value for an element that will preserve the x-height of the first-choice font

none
number

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

1

font-variant

Displays text in a small-caps font or a normal font

normal
small-caps

1

font-weight

Sets the weight of a font

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

1

 

Generated Content

 

 

 

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

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

2

 

 

Lists

 

 

 

list-style

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

list-style-type
list-style-position
list-style-image

1

list-style-image

Sets an image as the list-item marker

none
url

1

list-style-position

Sets where the list-item marker is placed in the list

inside
outside

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 

1

marker-offset

 

auto
length

2

 

Margins

 

 

 

margin

A shorthand  for setting the margin properties in one declaration

margin-top
margin-right
margin-bottom
margin-left

1

margin-bottom

Sets the bottom margin of an element

auto
length
%

1

margin-left

Sets the left margin of an element

auto
length
%

1

margin-right

Sets the right margin of an element

auto
length
%

1

margin-top

Sets the top margin of an element

auto
length
%

1

 

Outlines

 

 

 

outline

A shorthand  for setting all the outline properties in one declaration

outline-color
outline-style
outline-width

2

outline-color

Sets the color of the outline around an element

color
invert

2

outline-style

Sets the style of the outline around an element

none
dotted
dashed
solid
double
groove
ridge
inset
outset

2

outline-width

Sets the width of the outline around an element

thin
medium
thick
length

2

 

Padding

 

 

 

padding

A shorthand  for setting all of  the padding properties in one declaration

padding-top
padding-right
padding-bottom
padding-left

1

padding-bottom

Sets the bottom padding of an element

length
%

1

padding-left

Sets the left padding of an element

length
%

1

padding-right

Sets the right padding of an element

length
%

1

padding-top

Sets the top padding of an element

length
%

1

 

Positioning

 

 

 

bottom

Sets how far the bottom edge of an element is above/below the bottom edge of the parent element

auto
%
length

2

clip

Sets the shape of an element. The element is clipped into this shape, and displayed

shape
auto

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

2

overflow

Sets what happens if the content of an element overflow its area

visible
hidden
scroll
auto

2

position

Places an element in a static, relative, absolute or fixed position

static
relative
absolute
fixed

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

2

top

Sets how far the top edge of an element is above/below the top edge of the parent element

auto
%
length

2

vertical-align

Sets the vertical alignment of an element

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

1

z-index

Sets the stack order of an element

auto
number

2

 

Tables

 

 

 

border-collapse

Sets the border model of a table

collapse
separate

2

border-spacing

Sets the distance between the borders of adjacent cells (only for the “separated borders” model)

length length

2

caption-side

Sets the position of the caption according to the table

top
bottom
left
right

2

empty-cells

Sets whether cells with no visible content should have borders or not (only for the “separated borders” model) 

show
hide

2

table-layout

Sets the algorithm used to lay out the table

auto
fixed

2

 

Text Formatting          

 

 

 

colorr

Sets the color of a text

color

1

direction

Sets the text direction

ltr
rtl

2

letter-spacing

Increase or decrease the space between characters

normal
length

1

text-align

Aligns the text in an element

left
right
center
justify

1

text-decoration

Adds decoration to text

none
underline
overline
line-through
blink

1

text-indent

Indents the first line of text in an element

length
%

1

text-shadow

 

none
color
length

 

text-transform

Controls the letters in an element

none
capitalize
uppercase
lowercase

1

nicode-bidi

 

normal
embed
bidi-override

2

white-space

Sets how white space inside an element is handled

normal
pre
nowrap

1

word-spacing

Increase or decrease the space between words

normal
length

1

 

Pseudo-classes

 

 

:active

Adds special style to an activated element

1

:focus

Adds special style to an element while the element has focus

2

:hover

Adds special style to an element when you mouse over  it

1

:link

Adds special style to an unvisited link

1

:visited

Adds special style to a visited link

1

:first-child

Adds special style to an element that is the first child of some other element

2

:lang

Allows the author to specify a language to use in a specified element

2

 

Pseudo-elements

Purpose

 

:first-letter

Adds special style to the first letter of a text

1

:first-line

Adds special style to the first line of a text

1

:before

Inserts some content before an element

2

:after

Inserts some content after an element

2