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
