1

CSS Properties List

01. Background Properties

Property Description Possible Values Examples
Declares the attachment div { background-
of a background image attachment:fixed; }
background- fixed
(to scroll with the page
attachment scroll
content or be in a fixed div { background-
position). attachment:scroll; }
Valid color names, RGB div { background-color:green; }
background- Declares the background
values, hexidecimal
color color.
notation. div { color:#00FF00; }
div { background-
image:url(images/img.jpg); }
background- Declares the background
URL values.
image image of an element.
body { background-
image:url(img.jpg); }
Lengths or percentages for
the x and y positions, or
one of the predefined
values:
div { background-position:10px
top left
50px; }
background- Declares the position of top center
position a background image. top right
div { background-
center left
position:bottom right; }
center center
center right
bottom left
bottom center
bottom right
div { background-repeat:repeat-
repeat
Declares how and/or if a x; }
background- repeat-x
background image
repeat repeat-y
repeats. div { background-repeat:no-
no-repeat
repeat; }
Separate values by a space
in the following order div { background:green
Used as a shorthand (those that are not defined url(image.jpg) no-repeat fixed
property to set all the will use inherited or center center; }
background
background properties default initial values):
at once. div { background:url(image.jpg)
background-color fixed; }
background-image

SONIYA SUTHAR 1
2
background-repeat
background-attachment
background-position

02. Border Properties

Property Description Possible Values Examples
div { border-top-
color:green; }
border- Declares the color of Valid color names, RGB values, hexidecimal
top-color the top border. notation, or the predefined value transparent.
div { border-top-
color:#00FF00; }
none
hidden
dotted
div { border-top-
dashed
style:solid; }
border- Declares the style of solid
top-style the top border. double
div { border-top-
groove
style:inset; }
ridge
inset
outset
Lengths or the following predefined values: div { border-top-
width:2px; }
border- Declares the width of
thin
top-width the top border.
medium div { border-top-
thick width:thin; }
Separate values by a space in the following div { border-
order (those that are not defined will use top:2px solid
Used as a shorthand
inherited or default initial values): green; }
property to set all the
border-top
border-top properties
border-top-width div { border-
at once.
border-top-style top:thick double
border-top-color #00FF00; }
div { border-right-
color:green; }
border- Declares the color of Valid color names, RGB values, hexidecimal
right-color the right border. notation, or the predefined value transparent.
div { border-right-
color:#00FF00; }
none
hidden
dotted div { border-right-
dashed style:solid; }
border- Declares the style of
solid
right-style the right border.
double div { border-right-
groove style:inset; }
ridge
inset
SONIYA SUTHAR 2
3
outset
Lengths or the following predefined values: div { border-right-
border- width:2px; }
Declares the width of
right- thin
the right border.
width medium div { border-right-
thick width:thin; }
Separate values by a space in the following div { border-
order (those that are not defined will use right:2px solid
Used as a shorthand
inherited or default initial values): green; }
border- property to set all the
right border-right
border-right-width div { border-
properties at once.
border-right-style right:thick double
border-right-color #00FF00; }
div { border-
bottom-
border- color:green; }
Declares the color of Valid color names, RGB values, hexidecimal
bottom-
the bottom border. notation, or the predefined value transparent.
color div { border-
bottom-
color:#00FF00; }
none
hidden
div { border-
dotted
bottom-style:solid;
dashed
border- }
Declares the style of solid
bottom-
the bottom border. double
style div { border-
groove
bottom-style:inset;
ridge
}
inset
outset
div { border-
Lengths or the following predefined values: bottom-width:2px;
border- }
Declares the width of
bottom- thin
the bottom border.
width medium div { border-
thick bottom-
width:thin; }
Separate values by a space in the following div { border-
order (those that are not defined will use bottom:2px solid
Used as a shorthand
inherited or default initial values): green; }
border- property to set all the
bottom border-bottom
border-bottom-width div { border-
properties at once.
border-bottom-style bottom:thick
border-bottom-color double #00FF00; }
div { border-left-
border- Declares the color of Valid color names, RGB values, hexidecimal color:green; }
left-color the left border. notation, or the predefined value transparent.
div { border-left-

SONIYA SUTHAR 3
4
color:#00FF00; }
none
hidden
dotted
div { border-left-
dashed
style:solid; }
border- Declares the style of solid
left-style the left border. double
div { border-left-
groove
style:inset; }
ridge
inset
outset
Lengths or the following predefined values: div { border-left-
width:2px; }
border- Declares the width of
thin
left-width the left border.
medium div { border-left-
thick width:thin; }
Separate values by a space in the following div { border-
order (those that are not defined will use left:2px solid
Used as a shorthand
inherited or default initial values): green; }
property to set all the
border-left
border-left properties
border-left-width div { border-
at once.
border-left-style left:thick double
border-left-color #00FF00; }
Valid color names, RGB values, hexidecimal
notation, or the predefined value transparent.

Separate the color for each border by a space,

declaring the colors for the borders in the
div { border-
following order:
color:green red
blue olive; }
border-top-color
border-right-color
div { border-
border-bottom-color
Declares the border color:green; }
border- border-left-color
color of all four
color
borders at once. div { border-
Undeclared values work as further shorthand
color:green red; }
notation. If only one color value is declared,
all four borders will use that color. If two
div { border-
colors are declared, the top and bottom
color:green red
borders will use the first color while the right
blue; }
and left borders will use the second color. If
three colors are declared, the top border will
use the first color, the right and left borders
will use the second color, and the bottom
border will use the third color.
none
Declares the border div { border-
border- hidden
style of all four borders style:solid dotted
style dotted
at once. dashed double; }
dashed

SONIYA SUTHAR 4
5
solid
double div { border-
groove style:solid; }
ridge
inset div { border-
outset style:solid dotted;
}
Undeclared values work as further shorthand
notation. If only one style value is declared, all div { border-
four borders will use that style. If two styles style:solid dotted
are declared, the top and bottom borders will dashed; }
use the first style while the right and left
borders will use the second style. If three
styles are declared, the top border will use the
first style, the right and left borders will use
the second style, and the bottom border will
use the third style.
Lengths or the following predefined values:
div { border-
thin
width:1px 3px 5px
medium
2px; }
thick
div { border-
Undeclared values work as further shorthand
Declares the width of width:thin; }
border- notation. If only one width value is declared,
all four borders at
width all four borders will use that width. If two
once. div { border-
widths are declared, the top and bottom
width:2px 4px; }
borders will use the first width while the right
and left borders will use the second width. If
div { border-
three widths are declared, the top border will
width:2px 4px
use the first width, the right and left borders
5px; }
will use the second width, and the bottom
border will use the third width.
Separate values by a space in the following
Used as a shorthand to order (those that are not defined will use div { border:1px
declare the border inherited or default initial values): double green; }
border properties when all
four borders will have border-width div { border:thin
the same appearance. border-style solid #00FF00; }
border-color

03. Classification and Positioning Properties

Property Description Possible Values Examples
left
Declares the side(s) of an element div { clear:right; }
right
clear where no previous floating elements
both
are allowed to be adjacent. div { clear:both; }
none

SONIYA SUTHAR 5
6
URL values, and the
following prefefined
values:

auto
crosshair
default div { cursor:crosshair; }
pointer
move div {
Declares the type of cursor to be e-resize cusrsor:url(image.csr); }
cursor
displayed. ne-resize
nw-resize div {
n-resize cusrsor:url(image.csr),
se-resize pointer; }
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
list-item
run-in
compact
marker div { display:none; }
table
Declares if/how the element
display inline-table div { display:inline; }
displays.
table-row-group
table-header-group div { display:marker; }
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Declares whether a box should float
left div { float:left; }
to the left or right of other content, or
float right
whether it should not be floated at
none div { float:right; }
all.
visible div { visibility:visible; }
Declares the visibility of boxes
visibility hidden
generated by an element.
collapse div { visibility:hidden; }
Declares the distance that the top
content edge of the element is offset div { top:15px; }
Lengths, percentages, and
top below the top edge of its containing
the predefined value auto.
block. The position property of the div { top:2%; }
element must also be set to a value

SONIYA SUTHAR 6
 7
other than static.
Declares the distance that the right
content edge of the element is offset
div { right:15px; }
to the left of the right edge of its Lengths, percentages, and
right
containing block. The position the predefined value auto.
div { right:2%; }
property of the element must also be
set to a value other than static.
Declares the distance that the bottom
content edge of the element is offset
div { bottom:15px; }
above the bottom edge of its Lengths, percentages, and
bottom
containing block. The position the predefined value auto.
div { bottom:2%; }
property of the element must also be
set to a value other than static.
Declares the distance that the left
content edge of the element is offset
div { left:15px; }
to the right of the left edge of its Lengths, percentages, and
left
containing block. The position the predefined value auto.
div { left:2%; }
property of the element must also be
set to a value other than static.
static
div { position:absolute; }
Declares the type of positioning of an relative
position
element. absolute
div { position:relative; }
fixed
Shapes, or the predefined
value auto.

In CSS 2, the only valid

Declares the shape of a clipped div { clip:auto; }
shape is a rectangle, using
region when the value of the
clip the following format to
overflow property is set to a value div { clip:rect(2px, 4px,
specify the offset lengths
other than visible. 7px, 5px); }
from each side of the box:

rect(top, right, bottom,

left)
visible
div { overflow:hidden; }
Declares how content that overflows hidden
overflow
the element's box is handled. scroll
div { overflow:scroll; }
auto
Lengths, percentages, and
the following predefined
values:
span { vertical-
vertical- Declares the vertical alignment of an baseline align:middle; }
align inline-level element or a table cell. sub
super td { vertical-align:top; }
top
text-top
middle

SONIYA SUTHAR 7
8
bottom
text-bottom
div { z-index:2; }
Declares the stack order of the Integer values and the
z-index
element. predefined value auto.
div { z-index:auto; }

04. Dimension Properties

Property Description Possible Values Examples
div { height:200px; }
Declares the height of the Lengths, percentages, and the
height
element. predefined value auto.
div { height:50%; }
div { max-
height:200px; }
max- Declares the maximum height Lengths, percentages, and the
height of the element. predefined value auto.
div { max-
height:50%; }
div { min-
height:200px; }
min- Declares the minimum height of Lengths, percentages, and the
height the element. predefined value auto.
div { min-
height:50%; }
div { width:500px; }
Declares the width of the Lengths, percentages, and the
width
element. predefined value auto.
div { width:75%; }
div { max-
width:500px; }
max- Declares the maximum width of Lengths, percentages, and the
width the element. predefined value auto.
div { max-
width:75%; }
div { min-
width:500px; }
Declares the minimum width of Lengths, percentages, and the
min-width
the element. predefined value auto.
div { min-
width:75%; }

05. Font Properties

Property Description Possible Values Examples
Valid font family names or generic
family names, i.e. Arial, Verdana, div { font-family:Arial;
Declares the name of the
sans-serif, "Times New Roman", Times, }
font- font to be used. Previously
serif, etc.
family set in HTML via the face
div { font-family:Arial,
attribute in a <font> tag.
Font family names can be separated Helvetica, sans-serif; }
by a comma in the same declaration

SONIYA SUTHAR 8
9
to allow additional and/or generic
family names to be used if the
prefereed font is unable to be
displayed.
Lengths (number and unit type— i.e.
1em, 12pt, 10px, 80%) or one of the
following predefined values:
div { font-size:70%; }
xx-small
Declares the size of the font.
x-small div { font-size:0.85em;
Previously set in HTML via
font-size small }
the size attribute in a <font>
medium
tag.
large div { font-
x-large size:medium; }
xx-large
smaller
larger
Limited browser support:
Was part of CSS 2, but not
div { font-size-
in CSS 2.1. This property
adjust:0.54; }
font-size- may return in CSS 3.
Numeric value
adjust
div { font-size-
Declares the aspect value
adjust:0.46; }
(font size divided by x-
height).
normal
wider
Limited browser support: narrower
div { font-
Was part of CSS 2, but not ultra-condensed
stretch:narrower; }
in CSS 2.1. This property extra-condensed
font-
may return in CSS 3. condensed
stretch div { font-
semi-condensed
stretch:ultra-
Declares the stretch of the semi-expanded
expanded; }
font face. expanded
extra-expanded
ultra-expanded
div { font-style:italic; }
normal
font-style Declares the font style. italic
div { font-
oblique
style:oblique; }
div { font-
variant:normal; }
font- normal
Declares the font variant.
variant small-caps
div { font-
variant:small-caps; }
normal div { font-
font- Declares the font weight bold weight:bolder; }
weight (lightness or boldness) bolder
lighter div { font-weight:200;
SONIYA SUTHAR 9
10
100 }
200
300
400
500
600
700
800
900
Separate values by a space in the
following order (those that are not
defined will use inherited or default
div { font:italic small-
Used as a shorthand initial values):
caps bold 1em 1.2em
property to declare all of the
Arial }
font font properties at once font-style
(except font-size-adjust and font-variant
div { font:bold 0.8em
font-stretch). font-weight
Verdana }
font-size
line-height
font-family

06. Generated Content Properties

Property Description Possible Values Examples
String values, URL values,
and predefined value
formats:

counter(name)
counter(name, list-style- div:before { content:"some
Generates content in the
type) text"; }
document in conjunction with
content counters(name, string)
the :before and :after pseudo-
counters(name, string, div:after {
elements.
list-style-type) content:url(page2.html); }
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter- Declares the counter increment Integers and the
More Information
increment for each instance of a selector. predefined value none.
Declares the value the counter is
counter- Integers and the
set to on each instance of a More Information
reset predefined value none.
selector.
Declares the type of quotation
String values and the
quotes marks to use for quotations and More Information
predefined value none.
embedded quotations.

SONIYA SUTHAR 10
11

07. List Properties

Property Description Possible Values Examples
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
ol { list-style-type:upper-
upper-alpha
roman; }
list-style- Declares the type of list lower-greek
type marker used. lower-latin
ul { list-style-type:square;
upper-latin
}
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ol { list-style-
position:inside; }
list-style- Declares the position of the inside
position list marker. outside
ul { list-style-
position:outside; }
list-style- Declares an image to be ul { list-style-
URL values.
image used as the list marker. image:url(image.jpg); }
Separate values by a space in the
following order (those that are
ul { list-style:disc inside
not defined will use inherited or
Shorthand property to url(image.gif); }
default initial values):
list-style declare three list properties
at once. ol { list-style:upper-roman
list-style-type
outside; }
list-style-position
list-style-image
Declares the marker offset
marker- for elements with a value of Lengths and the predefined value li:before { display:marker;
offset marker set for the display auto. marker-offset:5px; }
property.

08. Margin Properties

Property Description Possible Values Examples
margin- Declares the top Lengths, percentages, and the predefined value auto. div { margin-

SONIYA SUTHAR 11
12
top margin for the top:5px; }
element.
div { margin-
top:15%; }
div { margin-
Declares the right right:5px; }
margin-
margin for the Lengths, percentages, and the predefined value auto.
right
element. div { margin-
right:15%; }
div { margin-
Declares the bottom bottom:5px; }
margin-
margin for the Lengths, percentages, and the predefined value auto.
bottom
element. div { margin-
bottom:15%; }
div { margin-
Declares the left left:5px; }
margin-
margin for the Lengths, percentages, and the predefined value auto.
left
element. div { margin-
left:15%; }
Separate values by a space in the following order
(those that are not defined will use inherited or
default initial values): div {
margin:5px
margin-top 12px 4px 7px; }
margin-right
margin-bottom div {
Shorthand property margin-left margin:5px; }
used to declare all
margin
the margin Undeclared values work as further shorthand div {
properties at once. notation. If only one length value is declared, all four margin:5px
margins will use that length. If two lengths are 10px; }
declared, the top and bottom margins will use the
first length while the right and left margins will use div {
the second length. If three lengths are declared, the margin:5px 7px
top margin will use the first length, the right and left 4px; }
margins will use the second length, and the bottom
margin will use the third length.

09. Outline Properties

Property Description Possible Values Examples
div { outline-
color:green; }
outline- Valid color names, RGB values,
Declares the outline color.
color hexidecimal notation.
div { outline-
color:#00FF00; }
outline- Declares the style of the none div { outline-
style outline. dotted style:solid; }
SONIYA SUTHAR 12
13
dashed
solid div { outline-
double style:inset; }
groove
ridge
inset
outset
Lengths or the following predefined
div { outline-
values:
width:2px; }
outline- Declares the width of the
width outline. thin
div { outline-
medium
width:thin; }
thick
Separate values by a space in the
following order (those that are not div { outline:green
Used as a shorthand defined will use inherited or default solid 2px; }
property to set all the initial values):
outline
background properties at div {
once. outline-color outline:#00FF00
outline-style double thick; }
outline-width

10. Padding Properties

Property Description Possible Values Examples
div { padding-
Declares the top top:5px; }
padding-
padding for the Lengths, percentages, and the predefined value auto.
top
element. div { padding-
top:15%; }
div { padding-
Declares the right right:5px; }
padding-
padding for the Lengths, percentages, and the predefined value auto.
right
element. div { padding-
right:15%; }
div { padding-
Declares the bottom bottom:5px; }
padding-
padding for the Lengths, percentages, and the predefined value auto.
bottom
element. div { padding-
bottom:15%; }
div { padding-
Declares the left left:5px; }
padding-
padding for the Lengths, percentages, and the predefined value auto.
left
element. div { padding-
left:15%; }
Shorthand property Separate values by a space in the following order div {
padding
used to declare all (those that are not defined will use inherited or padding:5px

SONIYA SUTHAR 13
14
the margin default initial values): 12px 4px 7px; }
properties at once.
padding-top div {
padding-right padding:5px; }
padding-bottom
padding-left div {
padding:5px
Undeclared values work as further shorthand 10px; }
notation. If only one length value is declared, all four
sides will use that length. If two lengths are declared, div {
the top and bottom sides will use the first length padding:5px
while the right and left sides will use the second 7px 4px; }
length. If three lengths are declared, the top side will
use the first length, the right and left sides will use
the second length, and the bottom side will use the
third length.

11. Page Properties

Property Description Possible Values Examples
Declares the type of marks to display outside crop @page {
marks
the page box. cross marks:crop; }
Declares the minimum number of lines of a
@page {
orphans paragraph that must be left at the bottom of Integers
orphans:2; }
a page.
Declares the type of page where an element More
page Indentifiers
should be displayed. Information
auto
always
page-break- More
Declares a page break. avoid
after Information
left
right
auto
always
page-break- More
Declares a page break. avoid
before Information
left
right
page-break- auto More
Declares a page break.
inside avoid Information
Lengths, and the
following predefined
values:
Declares the size and orientation of a page More
size
box. Information
auto
landscape
potrait

SONIYA SUTHAR 14
15
Declares the minimum number of lines of a
@page {
widows paragraph that must be left at the top of a Integers
widows:2; }
page.

12. Table Properties

Property Description Possible Values Examples
table { border-
collapse:collapse; }
border- Declares the way collapse
collapse borders are displayed. separate
table { border-
collapse:separate; }
Lengths for the horizontal and vertical
spacing, separated by a space.
table { border-
Declares the distance
spacing:5px; }
border- separating borders (if If one length is value is declared, that length
spacing border-collapse is is used for both the horizontal and vertical
table { border-
separate). spacing. If two lengths are declared, the first
spacing:5px 10px; }
one is used for horizontal spacing and the
second one is used for vertical spacing.
caption { caption-
Declares where the top
side:top; }
caption- table caption is bottom
side displayed in relation to left
caption { caption-
the table. right
side:right; }
table { empty-
Declares the way
cells:show; }
empty- empty cells are show
cells displayed (if border- hide
table { empty-
collapse is separate).
cells:hide; }
table { table-
layout:auto; }
table- Declares the type of auto
layout table layout. fixed
table { table-
layout:fixed; }

13. Text Properties

Property Description Possible Values Examples
Valid color names, RGB values,
hexidecimal notation. div { color:green; }

Declares the color of the The predefined color names are: div { color:rgb(0,255,0);
color
text. }
aqua
black div { color:#00FF00; }
blue
SONIYA SUTHAR 15
16
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
ltr
rtl div { direction:ltr; }
Declares the reading
direction
direction of the text.
ltr = left-to-right div { direction:rtl; }
rtl = right-to-left
div { line-height:normal;
}
Declares the distance Numbers, percentages, lengths, and
line-height div { line-height:2em; }
between lines. the predefined value of normal.
div { line-height:125%;
}
div { letter-
spacing:normal; }
Declares the amount of A length (in addition to the default
letter- div { letter-spacing:5px;
space between text space) or the predefined value of
spacing }
characters. normal.
div { letter-spacing:-
1px; }
left
right
center div { text-align:center; }
Declares the horizontal justify
text-align alignment of inline div { text-align:right; }
content. If used on a set of table cells, this
property can be given a string value td { text-align:"."; }
to which the text of each row of the
column will be aligned.
none div { text-
underline decoration:none; }
text- Declares the text
overline
decoration decoration.
line-through div { text-
blink decoration:underline; }
Declares the indentation
text-indent Lengths and percentages. div { text-indent:12px; }
of the first line of text.
SONIYA SUTHAR 16
17

div { text-indent:2%; }
A list containg a color followed by
numeric values (separated by
spaces) that specify:
div { text-shadow:green
1. The color for the shadow
2px 2px 7px; }
text- Declares shadow effects effect
shadow on the text. 2. Horizontal distance to the
div { text-shadow:olive -
right of the text
3px -4px 5px; }
3. Vertical distance below the
text
4. Blur radius

div { text-
none
Declares the capitalization transform:uppercase; }
text- capitalize
effects on the letters in the
transform uppercase
text. div { text-
lowercase
transform:lowercase; }
div { unicode-
Declares values relating to
normal bidi:embed; }
unicode- bidirectional text. May be
embed
bidi used in conjunction with
bidi-override div { unicode-bidi:bidi-
the the direction property.
override; }
div { white-space:pre; }
normal
white- Declares how white space
pre
space is handled in an element. div { white-
nowrap
space:nowrap; }
div { word-
A length (in addition to the default spacing:normal; }
word- Declares the space
space) or the predefined value of
spacing between words in the text.
normal. div { word-
spacing:1.5em; }

14. Other Properties

Property Description Possible Values Examples
Angle values in degrees (deg), or
one of the following predefined
values:

Declares the angle that left-side div { azimuth:90deg; }

azimuth sound travels to the far-left
listener. left div { azimuth:behind; }
center-left
center
center-right
right
SONIYA SUTHAR 17
18
far-right
right-side
behind
leftwards
rightwards
div { cue-
Declares an audio cue to URL values and the predefined after:url(sound.wav); }
cue-after
play after an element. value none.
div { cue-after:none; }
div { cue-
Declares an audio cue to URL values and the predefined before:url(sound.wav); }
cue-before
play before an element. value none.
div { cue-before:none; }
URL values and the predefined
value none. Separate the values
by a space in the following order:
div { cue:url(sound.wav)
Shorthand proerty to set cue-before url(sound2.wav); }
cue
both cue values at once. cue-after
div { cue:url(sound.wav); }
If only one cue value is declared,
it is used for both before and
after.
Angle values in degrees (deg), or
one of the following predefined
values:
div { elevation:30deg; }
Declares the elevation of
elevation below
a sound.
level div { elevation:higher; }
above
higher
lower
Declares the amount of div { pause-after:100ms; }
Time in milliseconds (ms) or
pause-after time to pause after an
percentages.
element. div { pause-after:20%; }
div { pause-before:100ms;
Declares the amount of
Time in milliseconds (ms) or }
pause-before time to pause before an
percentages.
element.
div { pause-before:20%; }
Separate the values by a space in
the following order:
div { pause:200ms 100ms;
Shorthand proerty to set pause-before
}
pause both pause values at pause-after
once.
div { pause:100ms; }
If only one pause value is
declared, it is used for both
before and after.

SONIYA SUTHAR 18
19
Frequencies in hertz (Hz) or the
following predefined values:
div { pitch:120Hz; }
Declares the average x-low
pitch
speaking pitch of a voice. low
div { pitch:high; }
medium
high
x-high
Number values between 0 and
div { pitch-range:50; }
Declares a change in the 100 (lower values indicate a flat
pitch-range
pitch range of a voice. voice while higher values
div { pitch-range:99; }
indicate an animated voice).
URL value, followed by one or
more of the following keywords,
separated by spaces: div { play-
during:url(music.wav); }
Declares a background mix
sound to be played while repeat div { play-
play-during
the current element is during:url(music.wav)
spoken. Alternatley, one of the following repeat; }
keywords:
div { play-during:none; }
auto
none
Numeric values between 0 and
div { richness:50; }
Declares the richness of 100 (lower values have less
richness
the voice in spoken text. richness and higher values have
div { richness:0; }
more richness).
normal div { speak:none; }
Declares if/how text is
speak none
spoken.
spell-out div { speak:spell-out; }
th { speak-header:once; }
speak- Declares how often table once
header header cells are spoken. always
th { speak-header:always; }
div { speak-numeral:digits;
}
speak- Declares how numerals digits
numeral are spoken. continuous
div { speak-
numeral:continuous; }
div { speak-
punctuation:code; }
speak- Declares how code
punctuation punctuation is spoken. none
div { speak-
punctuation:none; }
div { speech-rate:50; }
A number indicating the number
Declares the speech rate
speech-rate of words per minute, or one of
of spoken text. div { speech-rate:medium;
the following predefined values:
}

SONIYA SUTHAR 19
20

x-slow
slow
medium
fast
x-fast
faster
slower
Numeric values between 0 and
div { stress:50; }
Declares the stress of the 100 (lower values have less
stress
voice on spoken text. stress and higher values have
div { stress:0; }
more stress).
Declares the voice family Generic or specific voice family
voice-family More Information
of spoken text. names.
Numbers between 0 and 100,
percentages, or one of the
following predefined values:
div { volume:50; }
Declares the median silent
volume
volume. x-soft
div { volume:silent; }
soft
medium
loud
x-loud

SONIYA SUTHAR 20