CSS Properties List With Value and Example
CSS Properties List With Value and Example
Background Properties
Property Description Possible Values Examples
Declares the attachment of div { background-
background- a background image (to fixed attachment:fixed; }
attachment scroll with the page content scroll div { background-
or be in a fixed position). attachment:scroll; }
background- Declares the background Valid color names, RGB values, div { background-color:green; }
color color. hexidecimal notation. div { color:#00FF00; }
div { background-
background- Declares the background image:url(images/img.jpg); }
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:
top left
top center div { background-position:10px
background- Declares the position of a top right 50px; }
position background image. center left div { background-position:bottom
center center right; }
center right
bottom left
bottom center
bottom right
repeat div { background-repeat:repeat-x;
background- Declares how and/or if a repeat-x }
repeat background image repeats. repeat-y div { background-repeat:no-
no-repeat repeat; }
Separate values by a space in
the following order (those that
are not defined will use
div { background:green
Used as a shorthand inherited or default initial
url(image.jpg) no-repeat fixed
property to set all the values):
background center center; }
background properties at background-color
div { background:url(image.jpg)
once. background-image
fixed; }
background-repeat
background-attachment
background-position
Page | 1
Border Properties
Property Description Possible Values Examples
div { border-top-
border- Declares the color of the Valid color names, RGB values, hexidecimal notation, color:green; }
top-color top border. or the predefined value transparent. div { border-top-
color:#00FF00; }
none
hidden
dotted
dashed div { border-top-
border- Declares the style of the solid style:solid; }
top-style top border. double div { border-top-
groove style:inset; }
ridge
inset
outset
Lengths or the following predefined values: div { border-top-
border- Declares the width of thin width:2px; }
top-width the top border. medium div { border-top-
thick width:thin; }
Separate values by a space in the following order div { border-
Used as a shorthand (those that are not defined will use inherited or top:2px solid
border- property to set all the default initial values): green; }
top border-top properties at border-top-width div { border-
once. border-top-style top:thick double
border-top-color #00FF00; }
div { border-right-
border- Declares the color of the Valid color names, RGB values, hexidecimal notation, color:green; }
right-color right border. or the predefined value transparent. div { border-right-
color:#00FF00; }
none
hidden
dotted
dashed div { border-right-
border- Declares the style of the solid style:solid; }
right-style right border. double div { border-right-
groove style:inset; }
ridge
inset
outset
Lengths or the following predefined values: div { border-right-
border-
Declares the width of thin width:2px; }
right-
the right border. medium div { border-right-
width
thick width:thin; }
Page | 2
Separate values by a space in the following order div { border-
Used as a shorthand (those that are not defined will use inherited or right:2px solid
border- property to set all the default initial values): green; }
right border-right properties border-right-width div { border-
at once. border-right-style right:thick double
border-right-color #00FF00; }
div { border-
bottom-
border-
Declares the color of the Valid color names, RGB values, hexidecimal notation, color:green; }
bottom-
bottom border. or the predefined value transparent. div { border-
color
bottom-
color:#00FF00; }
none
hidden
dotted div { border-
dashed bottom-style:solid;
border-
Declares the style of the solid }
bottom-
bottom border. double div { border-
style
groove bottom-style:inset;
ridge }
inset
outset
div { border-
Lengths or the following predefined values: bottom-width:2px;
border-
Declares the width of thin }
bottom-
the bottom border. medium div { border-
width
thick bottom-
width:thin; }
Separate values by a space in the following order div { border-
Used as a shorthand (those that are not defined will use inherited or bottom:2px solid
border- property to set all the default initial values): green; }
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 the Valid color names, RGB values, hexidecimal notation, color:green; }
left-color left border. or the predefined value transparent. div { border-left-
color:#00FF00; }
none
hidden div { border-left-
border- Declares the style of the dotted style:solid; }
left-style left border. dashed div { border-left-
solid style:inset; }
double
Page | 3
groove
ridge
inset
outset
Lengths or the following predefined values: div { border-left-
border- Declares the width of thin width:2px; }
left-width the left border. medium div { border-left-
thick width:thin; }
Separate values by a space in the following order div { border-
Used as a shorthand (those that are not defined will use inherited or left:2px solid
border- property to set all the default initial values): green; }
left border-left properties at border-left-width div { border-
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 following
order: div { border-
border-top-color color:green red
border-right-color blue olive; }
border-bottom-color div { border-
Declares the border
border- border-left-color color:green; }
color of all four borders
color Undeclared values work as further shorthand div { border-
at once.
notation. If only one color value is declared, all four color:green red; }
borders will use that color. If two colors are declared, div { border-
the top and bottom borders will use the first color color:green red
while the right and left borders will use the second blue; }
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
hidden div { border-
dotted style:solid dotted
dashed dashed double; }
solid div { border-
Declares the border double style:solid; }
border-
style of all four borders groove div { border-
style
at once. ridge style:solid dotted;
inset }
outset div { border-
Undeclared values work as further shorthand style:solid dotted
notation. If only one style value is declared, all four dashed; }
borders will use that style. If two styles are declared,
Page | 4
the top and bottom borders will 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:
thin
div { border-
medium
width:1px 3px 5px
thick
2px; }
Undeclared values work as further shorthand
div { border-
notation. If only one width value is declared, all four
border- Declares the width of all width:thin; }
borders will use that width. If two widths are
width four borders at once. div { border-
declared, the top and bottom borders will use the
width:2px 4px; }
first width while the right and left borders will use
div { border-
the second width. If three widths are declared, the
width:2px 4px 5px;
top border will use the first width, the right and left
}
borders will use the second width, and the bottom
border will use the third width.
Separate values by a space in the following order
Used as a shorthand to
(those that are not defined will use inherited or div { border:1px
declare the border
default initial values): double green; }
border properties when all four
border-width div { border:thin
borders will have the
border-style solid #00FF00; }
same appearance.
border-color
Page | 5
Classification and Positioning Properties
Property Description Possible Values Examples
left
Declares the side(s) of an element where
right div { clear:right; }
clear no previous floating elements are allowed
both div { clear:both; }
to be adjacent.
none
URL values, and the following
prefefined values:
auto
crosshair
default
pointer
move div { cursor:crosshair; }
e-resize div {
Declares the type of cursor to be ne-resize cusrsor:url(image.csr); }
cursor
displayed. 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
table div { display:none; }
display Declares if/how the element displays. inline-table div { display:inline; }
table-row-group div { display:marker; }
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Declares whether a box should float to the left
div { float:left; }
float left or right of other content, or whether it right
div { float:right; }
should not be floated at all. none
Page | 6
visible
Declares the visibility of boxes generated div { visibility:visible; }
visibility hidden
by an element. div { visibility:hidden; }
collapse
Declares the distance that the top content
edge of the element is offset below the
Lengths, percentages, and the div { top:15px; }
top top edge of its containing block. The
predefined value auto. div { top:2%; }
position property of the element must also
be set to a value other than static.
Declares the distance that the right
content edge of the element is offset to
the left of the right edge of its containing Lengths, percentages, and the div { right:15px; }
right
block. The position property of the predefined value auto. div { right:2%; }
element must also be set to a value other
than static.
Declares the distance that the bottom
content edge of the element is offset
above the bottom edge of its containing Lengths, percentages, and the div { bottom:15px; }
bottom
block. The position property of the predefined value auto. div { bottom:2%; }
element must also be set to a value other
than static.
Declares the distance that the left content
edge of the element is offset to the right
Lengths, percentages, and the div { left:15px; }
left of the left edge of its containing block. The
predefined value auto. div { left:2%; }
position property of the element must also
be set to a value other than static.
static
Declares the type of positioning of an relative div { position:absolute; }
position
element. absolute div { position:relative; }
fixed
Shapes, or the predefined
value auto.
In CSS 2, the only valid shape
Declares the shape of a clipped region div { clip:auto; }
is a rectangle, using the
clip when the value of the overflow property is div { clip:rect(2px, 4px,
following format to specify the
set to a value other than visible. 7px, 5px); }
offset lengths from each side
of the box:
rect(top, right, bottom, left)
visible
Declares how content that overflows the hidden div { overflow:hidden; }
overflow
element's box is handled. scroll div { overflow:scroll; }
auto
Lengths, percentages, and the span { vertical-
vertical- Declares the vertical alignment of an
following predefined values: align:middle; }
align inline-level element or a table cell.
baseline td { vertical-align:top; }
Page | 7
sub
super
top
text-top
middle
bottom
text-bottom
Integer values and the div { z-index:2; }
z-index Declares the stack order of the element.
predefined value auto. div { z-index:auto; }
Page | 8
Dimension Properties
Property Description Possible Values Examples
Declares the height of the Lengths, percentages, and the div { height:200px; }
height
element. predefined value auto. div { height:50%; }
div { max-
max- Declares the maximum height of Lengths, percentages, and the height:200px; }
height the element. predefined value auto. div { max-
height:50%; }
div { min-
min- Declares the minimum height of Lengths, percentages, and the height:200px; }
height the element. predefined value auto. div { min-height:50%;
}
Lengths, percentages, and the div { width:500px; }
width Declares the width of the element.
predefined value auto. div { width:75%; }
div { max-
max- Declares the maximum width of Lengths, percentages, and the width:500px; }
width the element. predefined value auto. div { max-width:75%;
}
div { min-
Declares the minimum width of Lengths, percentages, and the width:500px; }
min-width
the element. predefined value auto. div { min-width:75%;
}
Page | 9
Font Properties
Property Description Possible Values Examples
Valid font family names or generic family
names, i.e. Arial, Verdana, sans-serif,
Declares the name of the font "Times New Roman", Times, serif, etc.
div { font-family:Arial; }
font- to be used. Previously set in Font family names can be separated by a
div { font-family:Arial,
family HTML via the face attribute in comma in the same declaration to allow
Helvetica, sans-serif; }
a <font> tag. 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:
xx-small
div { font-size:70%; }
x-small
Declares the size of the font. div { font-size:0.85em;
small
font-size Previously set in HTML via the }
medium
size attribute in a <font> tag. div { font-size:medium;
large
}
x-large
xx-large
smaller
larger
Limited browser support: Was
part of CSS 2, but not in CSS div { font-size-
font-size- 2.1. This property may return adjust:0.54; }
Numeric value
adjust in CSS 3. div { font-size-
Declares the aspect value (font adjust:0.46; }
size divided by x-height).
normal
wider
narrower
Limited browser support: Was
ultra-condensed
part of CSS 2, but not in CSS div { font-
extra-condensed
font- 2.1. This property may return stretch:narrower; }
condensed
stretch in CSS 3. div { font-stretch:ultra-
semi-condensed
Declares the stretch of the font expanded; }
semi-expanded
face.
expanded
extra-expanded
ultra-expanded
normal div { font-style:italic; }
font-style Declares the font style. italic div { font-style:oblique;
oblique }
font- normal div { font-
Declares the font variant.
variant small-caps variant:normal; }
Page | 10
div { font-variant:small-
caps; }
normal
bold
bolder
lighter
100
200 div { font-
font- Declares the font weight
300 weight:bolder; }
weight (lightness or boldness)
400 div { font-weight:200; }
500
600
700
800
900
Separate values by a space in the following
order (those that are not defined will use
Used as a shorthand property inherited or default initial values): div { font:italic small-
to declare all of the font font-style caps bold 1em 1.2em
font properties at once (except font-variant Arial }
font-size-adjust and font- font-weight div { font:bold 0.8em
stretch). font-size Verdana }
line-height
font-family
Page | 11
Generated Content Properties
Property Description Possible Values Examples
String values, URL values,
and predefined value
formats:
counter(name)
counter(name, list-style-
type) div:before { content:"some
Generates content in the document in
counters(name, string) text"; }
content conjunction with the :before and
counters(name, string, list- div:after {
:after pseudo-elements.
style-type) content:url(page2.html); }
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter- Declares the counter increment for Integers and the predefined
More Information
increment each instance of a selector. value none.
counter- Declares the value the counter is set Integers and the predefined
More Information
reset to on each instance of a selector. value none.
Declares the type of quotation marks
String values and the
quotes to use for quotations and embedded More Information
predefined value none.
quotations.
Page | 12
List Properties
Property Description Possible Values Examples
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
ol { list-style-type:upper-
list-style- Declares the type of list marker lower-greek
roman; }
type used. lower-latin
ul { list-style-type:square; }
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ol { list-style-
list-style- Declares the position of the list inside position:inside; }
position marker. outside ul { list-style-
position:outside; }
list-style- Declares an image to be used ul { list-style-
URL values.
image as the list marker. image:url(image.jpg); }
Separate values by a space in the
following order (those that are not
ul { list-style:disc inside
defined will use inherited or default
Shorthand property to declare url(image.gif); }
list-style initial values):
three list properties at once. ol { list-style:upper-roman
list-style-type
outside; }
list-style-position
list-style-image
Declares the marker offset for
marker- 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.
Page | 13
Margin Properties
Property Description Possible Values Examples
div { margin-
Declares the top
margin- top:5px; }
margin for the Lengths, percentages, and the predefined value auto.
top div { margin-
element.
top:15%; }
div { margin-
Declares the right
margin- right:5px; }
margin for the Lengths, percentages, and the predefined value auto.
right div { margin-
element.
right:15%; }
div { margin-
Declares the bottom
margin- bottom:5px; }
margin for the Lengths, percentages, and the predefined value auto.
bottom div { margin-
element.
bottom:15%; }
div { margin-
Declares the left
margin- left:5px; }
margin for the Lengths, percentages, and the predefined value auto.
left div { margin-
element.
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-top
margin:5px
margin-right
12px 4px 7px; }
margin-bottom
div {
Shorthand property margin-left
margin:5px; }
used to declare all Undeclared values work as further shorthand notation. If
margin div {
the margin only one length value is declared, all four margins will use
margin:5px
properties at once. that length. If two lengths are declared, the top and bottom
10px; }
margins will use the first length while the right and left
div {
margins will use the second length. If three lengths are
margin:5px 7px
declared, the top margin will use the first length, the right
4px; }
and left margins will use the second length, and the bottom
margin will use the third length.
Page | 14
Outline Properties
Property Description Possible Values Examples
div { outline-
outline- Valid color names, RGB values, hexidecimal color:green; }
Declares the outline color.
color notation. div { outline-
color:#00FF00; }
none
dotted
dashed
div { outline-
solid
outline- Declares the style of the style:solid; }
double
style outline. div { outline-
groove
style:inset; }
ridge
inset
outset
Lengths or the following predefined values: div { outline-
outline- Declares the width of the thin width:2px; }
width outline. medium div { outline-
thick width:thin; }
Separate values by a space in the following
order (those that are not defined will use div { outline:green
Used as a shorthand property
inherited or default initial values): solid 2px; }
outline to set all the background
outline-color div { outline:#00FF00
properties at once.
outline-style double thick; }
outline-width
Page | 15
Padding Properties
Property Description Possible Values Examples
div { padding-
Declares the top
padding- top:5px; }
padding for the Lengths, percentages, and the predefined value auto.
top div { padding-
element.
top:15%; }
div { padding-
Declares the right
padding- right:5px; }
padding for the Lengths, percentages, and the predefined value auto.
right div { padding-
element.
right:15%; }
div { padding-
Declares the bottom
padding- bottom:5px; }
padding for the Lengths, percentages, and the predefined value auto.
bottom div { padding-
element.
bottom:15%; }
div { padding-
Declares the left
padding- left:5px; }
padding for the Lengths, percentages, and the predefined value auto.
left div { padding-
element.
left:15%; }
Separate values by a space in the following order (those that
are not defined will use inherited or default initial values): div {
padding-top padding:5px
padding-right 12px 4px 7px; }
padding-bottom div {
Shorthand property
padding-left padding:5px; }
used to declare all
padding Undeclared values work as further shorthand notation. If div {
the margin
only one length value is declared, all four sides will use that padding:5px
properties at once.
length. If two lengths are declared, the top and bottom sides 10px; }
will use the first length while the right and left sides will use div {
the second length. If three lengths are declared, the top side padding:5px
will use the first length, the right and left sides will use the 7px 4px; }
second length, and the bottom side will use the third length.
Page | 16
Page Properties
Property Description Possible Values Examples
Declares the type of marks to display outside the crop @page {
marks
page box. cross marks:crop; }
Declares the minimum number of lines of a
@page {
orphans paragraph that must be left at the bottom of a Integers
orphans:2; }
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:
More
size Declares the size and orientation of a page box. auto
Information
landscape
potrait
Declares the minimum number of lines of a @page {
widows Integers
paragraph that must be left at the top of a page. widows:2; }
Page | 17
Table Properties
Property Description Possible Values Examples
table { border-
border- Declares the way collapse collapse:collapse; }
collapse borders are displayed. separate table { border-
collapse:separate; }
Lengths for the horizontal and vertical spacing,
separated by a space.
Declares the distance table { border-
If one length is value is declared, that length is used
border- separating borders (if spacing:5px; }
for both the horizontal and vertical spacing. If two
spacing border-collapse is table { border-
lengths are declared, the first one is used for
separate). spacing:5px 10px; }
horizontal spacing and the second one is used for
vertical spacing.
Declares where the top caption { caption-
caption- table caption is bottom side:top; }
side displayed in relation to left caption { caption-
the table. right side:right; }
Declares the way empty table { empty-
empty- cells are displayed (if show cells:show; }
cells border-collapse is hide table { empty-
separate). cells:hide; }
table { table-
table- Declares the type of auto layout:auto; }
layout table layout. fixed table { table-
layout:fixed; }
Page | 18
Text Properties
Property Description Possible Values Examples
Valid color names, RGB values,
hexidecimal notation.
The predefined color names are:
aqua
black
blue
fuchsia
gray
green div { color:green; }
color Declares the color of the text. lime div { color:rgb(0,255,0); }
maroon div { color:#00FF00; }
navy
olive
purple
red
silver
teal
white
yellow
ltr
Declares the reading direction of rtl div { direction:ltr; }
direction
the text. ltr = left-to-right div { direction:rtl; }
rtl = right-to-left
div { line-height:normal; }
Declares the distance between Numbers, percentages, lengths, and
line-height div { line-height:2em; }
lines. the predefined value of normal.
div { line-height:125%; }
div { letter-
A length (in addition to the default spacing:normal; }
letter- Declares the amount of space
space) or the predefined value of div { letter-spacing:5px; }
spacing between text characters.
normal. div { letter-spacing:-1px;
}
left
right
center
div { text-align:center; }
Declares the horizontal justify
text-align div { text-align:right; }
alignment of inline content. If used on a set of table cells, this
td { text-align:"."; }
property can be given a string value
to which the text of each row of the
column will be aligned.
none div { text-
text-
Declares the text decoration. underline decoration:none; }
decoration
overline div { text-
Page | 19
line-through decoration:underline; }
blink
Declares the indentation of the div { text-indent:12px; }
text-indent Lengths and percentages.
first line of text. div { text-indent:2%; }
A list containg a color followed by
numeric values (separated by spaces)
that specify: div { text-shadow:green
text- Declares shadow effects on the The color for the shadow effect 2px 2px 7px; }
shadow text. Horizontal distance to the right of the div { text-shadow:olive -
text 3px -4px 5px; }
Vertical distance below the text
Blur radius
none div { text-
text- Declares the capitalization capitalize transform:uppercase; }
transform effects on the letters in the text. uppercase div { text-
lowercase transform:lowercase; }
Declares values relating to div { unicode-
normal
unicode- bidirectional text. May be used bidi:embed; }
embed
bidi in conjunction with the the div { unicode-bidi:bidi-
bidi-override
direction property. override; }
normal div { white-space:pre; }
white- Declares how white space is
pre div { white-
space handled in an element.
nowrap space:nowrap; }
div { word-
A length (in addition to the default
word- Declares the space between spacing:normal; }
space) or the predefined value of
spacing words in the text. div { word-
normal.
spacing:1.5em; }
Page | 20
Other Properties
Property Description Possible Values Examples
Angle values in degrees (deg), or one
of the following predefined values:
left-side
far-left
left
center-left
Declares the angle that
center div { azimuth:90deg; }
azimuth sound travels to the
center-right div { azimuth:behind; }
listener.
right
far-right
right-side
behind
leftwards
rightwards
div { cue-
Declares an audio cue to URL values and the predefined value
cue-after after:url(sound.wav); }
play after an element. none.
div { cue-after:none; }
div { cue-
Declares an audio cue to URL values and the predefined value
cue-before before:url(sound.wav); }
play before an element. 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 cue-before url(sound2.wav); }
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:
below
Declares the elevation of a div { elevation:30deg; }
elevation level
sound. div { elevation:higher; }
above
higher
lower
Declares the amount of
Time in milliseconds (ms) or div { pause-after:100ms; }
pause-after time to pause after an
percentages. div { pause-after:20%; }
element.
Declares the amount of
Time in milliseconds (ms) or div { pause-before:100ms; }
pause-before time to pause before an
percentages. div { pause-before:20%; }
element.
pause Shorthand proerty to set Separate the values by a space in the div { pause:200ms 100ms; }
Page | 21
both pause values at once. following order: div { pause:100ms; }
pause-before
pause-after
If only one pause value is declared, it
is used for both before and after.
Frequencies in hertz (Hz) or the
following predefined values:
x-low
Declares the average div { pitch:120Hz; }
pitch low
speaking pitch of a voice. div { pitch:high; }
medium
high
x-high
Number values between 0 and 100
Declares a change in the (lower values indicate a flat voice div { pitch-range:50; }
pitch-range
pitch range of a voice. while higher values indicate an div { pitch-range:99; }
animated voice).
URL value, followed by one or more
of the following keywords, separated
div { play-
by spaces:
Declares a background during:url(music.wav); }
mix
sound to be played while div { play-
play-during repeat
the current element is during:url(music.wav)
Alternatley, one of the following
spoken. repeat; }
keywords:
div { play-during:none; }
auto
none
Numeric values between 0 and 100
Declares the richness of the div { richness:50; }
richness (lower values have less richness and
voice in spoken text. div { richness:0; }
higher values have more richness).
normal
Declares if/how text is div { speak:none; }
speak none
spoken. div { speak:spell-out; }
spell-out
Declares how often table once th { speak-header:once; }
speak-header
header cells are spoken. always th { speak-header:always; }
div { speak-numeral:digits; }
speak- Declares how numerals are digits
div { speak-
numeral spoken. continuous
numeral:continuous; }
div { speak-
speak- Declares how punctuation is code punctuation:code; }
punctuation spoken. none div { speak-
punctuation:none; }
A number indicating the number of
Declares the speech rate of div { speech-rate:50; }
speech-rate words per minute, or one of the
spoken text. div { speech-rate:medium; }
following predefined values:
Page | 22
x-slow
slow
medium
fast
x-fast
faster
slower
Numeric values between 0 and 100
Declares the stress of the div { stress:50; }
stress (lower values have less stress and
voice on spoken text. div { stress:0; }
higher values have more stress).
Declares the voice family of Generic or specific voice family
voice-family More Information
spoken text. names.
Numbers between 0 and 100,
percentages, or one of the following
predefined values:
silent
Declares the median div { volume:50; }
volume x-soft
volume. div { volume:silent; }
soft
medium
loud
x-loud
Page | 23