We include each property's possible values, defined as either an explicit keyword 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, or an RGB triple of the form:rgb(red, green,
blue)
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 like px or pt or em etc.

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.

shape: A shape keyword, followed by a parentheses-enclosed list of comma-separated shapespecific 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.tutorialspoint.com/")

Property

Possible Values

azimuth

background

angle

left-side

far-left

left

center-left

center

center-right

right

far-right

right-side

Values from composite

properties.

Description
Describes the position of a sound source along
the horizontal axis of the listener's environment.

Composite property for the following properties:

background-attachment

background-color

backgroundattachment

backgroundcolor

backgroundimage

backgroundposition

backgroundrepeat

scroll

fixed

color

transparent

background-image

background-position

background-repeat

Determines if the background image is fixed in

the window or scrolls as the document scrolls

Sets the background color of an element

Sets the background image of an element

url

none

percent

none

length

top

center

bottom

left

right

repeat

repeat-x

repeat-y

no-repeat

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

Determines how the background image is

repeated (tiled) across an element

border

See Description

Sets all four of an element's borders; value is

one or more of a color, a value for borderwidth, and a value for border-style

borderbottom

See Description

Sets an element's bottom border; value is one

or more of a color, a value for border-bottomwidth, and a value forborder-style

borderbottom-width

bordercollapse

length

thin

medium

thick

collapse

separate

Sets the table border rendering algorithm

border-color

border-leftcolor

border-rightcolor

border-topcolor

borderbottom-color

border-left

border-leftwidth

Sets the thickness of an element's bottom

border.

Sets the color of all four of an element's

borders; default is the color of the element

color

transparent

color

Sets the color of an element's left borders;

default is the color of the element

color

Sets the color of an element's right borders;

default is the color of the element

color

Sets the color of an element's top borders;

default is the color of the element

color

Sets the color of an element's bottom borders;

default is the color of the element

See description

Sets an element's left border; value is one

or more of a color, a value for border-leftwidth, and a value forborder-style.
Sets the thickness of an element's left border

length

thin

medium


border-right

border-rightwidth

borderspacing

thick

See description

Sets the thickness of an element's right border

length

thin

medium

thick

See description

border-style

border-top

border-topwidth

Sets an element's right border; value is one or

more of a color, a value for border-right-width,
and a value forborder-style.

With separate borders set the spacing between

borders. One value sets vertical and horizontal
spacing and two values sets horizontal and
vertical spacing respectively.
Sets the style of all four of an element's borders

dashed

dotted

double

groove

inset

none

outset

ridge

solid

See description

Sets an element's top border; value is one or

more of a color, a value for border-top-width,
and a value forborder-style
Sets the thickness of an element's top border.

length

thin

medium

thick

border-width

length

thin

medium

thick

bottom

length

percent

top

bottom

left

right

both

left

none

right

shape

color

caption-side

Sets the thickness of all four of an element's

borders

Used with the position property to place the

bottom edge of an element

Sets the position for a table caption

clear

clip

Sets which margins of an element must not be

adjacent to a floating element; the element is
moved down until that margin is clear

Sets the clipping mask for an element

color

Sets the color of an element

content

See description

Inserts generated content around an element.

counterincrement

See description

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.

counter-reset

See description

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.

cue-after

url

none

url

none

cue-before

cursor

Plays the designated sound after an element is

spoken

Plays the designated sound before an element is

spoken

Defines shap of the cursor

url

auto

crosshair

default

active

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

progress

direction

ltr

rtl

block

inline

list-items

marker

none

display

Controls how an element is displayed

elevation

Sets the height at which a sound is played

angle

below

level

above

higher

lower

hide

show

left

none

right

empty-cells

float

font

Defines direction of the flow of an element

content

See description

With separate borders, hides empty cells in a

table

Determines if an element floats to the left or

right, allowing text to wrap around it or be
displayed inline

Sets all the font attributes for an element. Value

is any of the values for:

font-family

List of font names

font-size

font-sizeadjust

font-style

font-variant

font-weight

font-size

line-height

font-family

Defines the font for an element, either as a

specific font or as one of the generic serif, sansserif, cursive, fantasy, and monospace .
Defines the font size

xx-small

x-small

small

medium

large

xlarge

xx-large

larger

smaller

length

percent

none

ratio

wider

normal

Adjusts the current font's aspect ratio

font-stretch

Determines the amount to stretch the current

font

narrower

ultracondensed

extracondensed

condensed

semi -condensed

semiexpanded

expanded

extra-ex

font-style

normal

italic

oblique

normal

small-caps

font-variant

Defines the style of the face, either normal or

some type of slanted style

Defines a font to be in small caps

font-weight

normal

bold

bolder

lighter

number

height

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

Defines the height of an element

length

auto

length

left

Used with the position property to place the left

edge of an element

percent

letter-spacing

Inserts additional space between text characters

length

normal

length

number

normal

percent

line-height

list-style

list-styleimage

See description

url

none

Sets the distance between adjacent text

baselines

Defines list-related styles using any of the

values for:

list-style-image

liststyle-position

list-style-type

Defines an image to be used as a list item's

marker, in lieu of the value for:

list-style-type

.
list-styleposition

inside

outside

circle

disc

square

decimal

lower-alpha

list-style-type

Indents or extends (default) a list item's marker

with respect to the item's content

Defines a list item's marker either for unordered

lists (circle, disc, or square) or for ordered lists
(decimal, loweralpha, lower-roman, none,
upper-alpha, or upper-roman)

lower-roman

none

upper-alpha

upperroman
Defines all four of an element's margins

margin

marginbottom

length

percent

auto

length

percent

auto

length

percent

auto

margin-left

margin-right

length

percent

auto

length

percent

auto

length

margin-top

marker-offset

Defines the bottom margin of an element.

Default value is 0.

Defines the left margin of an element. Default

value is 0.

Defines the right margin of an element. Default

value is 0.

Defines the top margin of an element. Default

value is 0.

The marker-offset property can be used in

bulleted lists for specifying the distance between
the nearest border edges of a marker box (or
bullet) and its associated principal box.

auto

marks

crop

cross

none

inherit

max-height

percent

length

none

max-width

percent

length

none

percent

length

min-height

min-width

percent

length

orphans

outline

number

See the description

outline-color

color

invert

The marks property is used to set crop marks

and cross marks on paged media. This is used
with the @page rule.

max-height property is used to constrain the

height of an element.

max-width property is used to set the maximum

width of an element.

min-height property is used to constrain the

height of an element.

min-width property is used to constrain the

width of an element.

Sets the minimum number of lines allowed in an

orphaned paragraph fragment

The outline property is a shorthand property to

specify all outline properties.
The outline-color property is used to specify the
color of the outline. Note that, unlike the border
property, outline does not take up extra space
and it can be non-rectangular.

outline-colorstyle

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

thin

medium

thick

length (i.e. 1px)

inherit

outline-width

overflow

padding
paddingbottom

The outline-style property is used to specify the

style of the outline. Note that, unlike the border
property, outline does not take up extra space
and it can be non-rectangular.

The outline-color property is used to specify the

color of the outline. Note that, unlike the border
property, outline does not take up extra space
and it can be non-rectangular.

Determines how overflow content is rendered

auto

hidden

scroll

visible

See description

length

percent

Defines all four padding amounts around an

element
Defines the bottom padding of an element.
Default value is 0

padding-left

length

percent

length

percent

padding-right

padding-top

length

percent

page

page-breakafter

page-breakbefore

page-breakinside

Defines the left padding of an element. Default

value is 0

Defines the right padding of an element. Default

value is 0

Defines the top padding of an element. Default

value is 0

name

Associates a named page layout with an

element

auto

Forces or suppresses page breaks after an

element.

always

avoid

left

right

auto

always

avoid

left

right

auto

avoid

Forces or suppresses page breaks before an

element.

Suppresses page breaks within an element

pause

percent

The pause property is CSS shorthand for

specifying shorthand property for specifying

pauses in aural media.

time

pause-after

Pauses a media after speaking an element

percent

time

percent

time

frequency

x-low

low

medium

high

x-high

pause-before

Pauses a media before speaking an element

pitch

pitch-range

number

play-during

url

mix

none

repeat

position

Sets the average pitch of an element's spoken

content

Sets the range of the pitch, from 0 (flat) to 100

(broad); default is 50

If a URL is provided, it is played during an

element's spoken content .
specifying repeat loops the audio ; mixcauses it
to mix with, rather than replace,
other background audio.

Sets the positioning model for an element

absolute

fixed

relative


quotes

static

List of strings

richness
number

Sets the richness of the voice, from 0 (flat) to

100 (mellifluous); default is 50

length

Used with the position property to place the

right edge of an element.

percent

auto

length

portrait

landscape

inherit

right

size

speak

speakpunctuation

The size property is used in paged media to

specify the size of the page.

Determines how an element's content is spoken.

normal

none

spell-out

always

once

speak-header

speaknumeral

Sets the quote symbols used to quote text

Determines if table headers are spoken once for

each row or column or each time a cell is
spoken.

Determines how numerals are spoken

continuous

digits

code

none

Determines if punctuation is spoken or used for

inflection

speech-rate

number

x-slow

slow

medium

fast

x-fast

faster

slower

stress

number

auto

fixed

center

justify

left

right

blink

line-through

none

overline

underline

length

table-layout

Sets the stress of the voice, from 0 (catatonic)

to 100 (hyperactive); default is 50.

Determines the table-rendering algorithm

text-align

textdecoration

Sets the rate of speech; a number sets the rate

in words per minute

Sets the text alignment style for an element

text-indent

Defines any decoration for the text; values may

be combined

Defines the indentation of the first line of text in

an element; default is 0


text-shadow
texttransform

percent

See description

Transforms the text in the element accordingly

capitalize

lowercase

none

uppercase

length

percent

top

vertical-align

Used with the position property to place the top

edge of an element.

Sets the vertical positioning of an element

percent

baseline

bottom

middle

sub

super

text-bottom

text-top

top

collapse

hidden

visible

visibility

voice-family

Creates text drop shadows of varying colors and

offsets

List of voices

Determines if an element is visible in the

document or table

Selects a named voice family to speak an

element's content

volume

number

percent

silent

x-soft

soft

medium

loud

x-loud

white-space

normal

nowrap

pre

widows

number

width

Sets the volume of spoken content; numeric

values range from 0 to 100

Defines how whitespace within an element is

handled

Sets the minimum number of lines allowed in a

widowed paragraph fragment

Defines the width of an element

length

percent

auto

length

normal

word-spacing

Inserts additional space between words

z-index

number

Sets the rendering layer for the current

element.

Pseudo-classes & Pseudo-elements:

Property
:active

Description
Use this class to add special effect to an activated element

:focus

Use this class to add special effect to an element while the element has focus

:hover

Use this class to add special effect to an element when you mouse over it

:link

Use this class to add special effect to an unvisited link

:visited

Use this class to add special effect to a visited link

:first-child

Use this class to add special effect to an element that is the first child of some
other element.

:lang

Use this class to specify a language to use in a specified element

:firstletter

Use this element to add special effect to the first letter of a text

:first-line

Use this element to add special effect to the first line of a text

:before

Use this element to insert some content before an element

:after

Use this element to insert some content after an element

This is a complete reference guide for web developers where haved we listed all the CSS properties
defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets , Level 2

Aural

Generated Content

Table

Background

List and Marker

Text

Border

Margin

Print

Classification

Outlines

Pseudo-classes

Dimension

Padding

Pseudo-elements

Font

Positioning

Click any property to see its description with examples:

Property

Description

azimuth

Describes the position of a sound source along the horizontal axis of

the listener's environment.

background

Composite property for the following properties:

background -attachment

background-color

background-image

background-position

background-repeat

backgroundattachment

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

as the document scrolls

background-color

Sets the background color of an element

background-image

Sets the background image of an element

background-position

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

background-repeat

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

element

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

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

border-bottom-width

Sets the thickness of an element's bottom border.

border-collapse

Sets the table border rendering algorithm

border-color

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

border-left-color

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

border-right-color

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

the element

border-top-color

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

border-bottom-color

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

the element

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.

border-left-width

Sets the thickness of an element's left border

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.

border-right-width

Sets the thickness of an element's right border

border-spacing

With separate borders set the spacing between borders. One value
sets vertical and horizontal spacing and two values sets horizontal
and vertical spacing respectively.

border-style

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

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

border-top-width

Sets the thickness of an element's top border.

border-width

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

bottom

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

element

caption-side

Sets the position for a table caption

clear

Sets which margins of an element must not be adjacent to a floating

element; the element is moved down until that margin is clear

clip

Sets the clipping mask for an element

color

Sets the color of an element

content

Inserts generated content around an element.

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.

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.

cue-after

Plays the designated sound after an element is spoken

cue-before

Plays the designated sound before an element is spoken

cursor

Defines shap of the cursor

direction

Defines direction of the flow of an element content

display

Controls how an element is displayed

elevation

Sets the height at which a sound is played

empty-cells

With separate borders, hides empty cells in a table

float

Determines if an element floats to the left or right, allowing text to

wrap around it or be displayed inline

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

font-family

font-family

Defines the font for an element, either as a specific font or as one of

the generic serif, sans-serif, cursive, fantasy, and monospace.

font-size

Defines the font size

font-size-adjust

Adjusts the current font's aspect ratio

font-stretch

Determines the amount to stretch the current font

font-style

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

font-variant

Defines a font to be in small caps

font-weight

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

height

Defines the height of an element

left

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

letter-spacing

Inserts additional space between text characters

line-height

Sets the distance between adjacent text baselines

list-style

Defines list-related styles using any of the values for:

list-style-image

list-style-image

liststyle-position

list-style-type

Defines an image to be used as a list item's marker, in lieu of the

value for:

list-style-type

list-style-position

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

item's content

list-style-type

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

margin

Defines all four of an element's margins

margin-bottom

Defines the bottom margin of an element. Default value is 0.

margin-left

Defines the left margin of an element. Default value is 0.

margin-right

Defines the right margin of an element. Default value is 0.

margin-top

Defines the top margin of an element. Default value is 0.

marker-offset

The marker-offset property can be used in bulleted lists for

specifying the distance between the nearest border edges of a
marker box (or bullet) and its associated principal box.

marks

The marks property is used to set crop marks and cross marks on
paged media. This is used with the @page rule.

max-height

max-height property is used to constrain the height of an element.

max-width

max-width property is used to set the maximum width of an element.

min-height

min-height property is used to constrain the height of an element.

min-width

min-width property is used to constrain the width of an element.

orphans

Sets the minimum number of lines allowed in an orphaned paragraph

fragment

outline

The outline property is a shorthand property to specify all outline

properties.

outline-color

The outline-color property is used to specify the color of the outline.

Note that, unlike the border property, outline does not take up extra
space and it can be non-rectangular.

outline-color-style

The outline-style property is used to specify the style of the outline.

Note that, unlike the border property, outline does not take up extra
space and it can be non-rectangular.

outline-width

The outline-color property is used to specify the color of the outline.

Note that, unlike the border property, outline does not take up extra
space and it can be non-rectangular.

overflow

Determines how overflow content is rendered

padding

Defines all four padding amounts around an element

padding-bottom

Defines the bottom padding of an element. Default value is 0

padding-left

Defines the left padding of an element. Default value is 0

padding-right

Defines the right padding of an element. Default value is 0

padding-top

Defines the top padding of an element. Default value is 0

page

Associates a named page layout with an element

page-break-after

Forces or suppresses page breaks after an element.

page-break-before

Forces or suppresses page breaks before an element.

page-break-inside

Suppresses page breaks within an element

pause

The pause property is CSS shorthand for specifying shorthand

property for specifying pauses in aural media.

pause-after

Pauses a media after speaking an element

pause-before

Pauses a media before speaking an element

pitch

Sets the average pitch of an element's spoken content

pitch-range

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

play-during

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.

position

Sets the positioning model for an element

quotes

Sets the quote symbols used to quote text

richness

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

default is 50

right

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

element.

size

The size property is used in paged media to specify the size of the
page.

speak

Determines how an element's content is spoken.

speak-header

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

speak-numeral

Determines how numerals are spoken

speak-punctuation

Determines if punctuation is spoken or used for inflection

speech-rate

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

stress

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

default is 50.

table-layout

Determines the table-rendering algorithm

text-align

Sets the text alignment style for an element

text-decoration

Defines any decoration for the text; values may be combined

text-indent

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

is 0

text-shadow

Creates text drop shadows of varying colors and offsets

text-transform

Transforms the text in the element accordingly

top

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

vertical-align

Sets the vertical positioning of an element

visibility

Determines if an element is visible in the document or table

voice-family

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

volume

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

100

white-space

Defines how whitespace within an element is handled

widows

Sets the minimum number of lines allowed in a widowed paragraph

fragment

width

Defines the width of an element

word-spacing

Inserts additional space between words

z-index

Sets the rendering layer for the current element.

Pseudo-classes & Pseudo-elements:

Property

Description

:active

Use this class to add special effect to an activated element

:focus

Use this class to add special effect to an element while the element
has focus

:hover

Use this class to add special effect to an element when you mouse
over it

:link

Use this class to add special effect to an unvisited link

:visited

Use this class to add special effect to a visited link

:first-child

Use this class to add special effect to an element that is the first child
of some other element.

:lang

Use this class to specify a language to use in a specified element

:first-letter

Use this element to add special effect to the first letter of a text

:first-line

Use this element to add special effect to the first line of a text

:before

Use this element to insert some content before an element

:after

Use this element to insert some content after an element