1|Page CSS Properties(Developed by Zahid Javed)

Background Properties

Property Description Possible Values Examples

background-attachment Declares the attachment of a background image fixed div { background-attachment:fixed; }

(to scroll with the page content or be in a fixed scroll
position). div { background-attachment:scroll; }

background-color Declares the background color. Valid color names, div { background-color:green; }
RGB values,
hexidecimal notation. div { color:#00FF00; }

background-image Declares the background image of an element. URL values. div { background-image:url(images/img.jpg); }

body { background-image:url(img.jpg); }

background-position Declares the position of a background image. Lengths or div { background-position:10px 50px; }
percentages for the x
and y positions, or one div { background-position:bottom right; }
of the predefined
values:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

background-repeat Declares how and/or if a background image repeat div { background-repeat:repeat-x; }

repeats. repeat-x
repeat-y div { background-repeat:no-repeat; }
no-repeat

background Used as a shorthand property to set all the Separate values by a div { background:green url(image.jpg) no-repeat fixed cente
background properties at once. space in the following r center; }
2|Page CSS Properties(Developed by Zahid Javed)

order (those that are

not defined will use div { background:url(image.jpg) fixed; }
inherited or default
initial values):

background-color
background-image
background-repeat
background-attachme
nt
background-position

Border Properties

Property Description Possible Values Examples

border-top-color Declares the color of the top border. Valid color names, div { border-top-color:green; }
RGB values,
hexidecimal notation, div { border-top-color:#00FF00; }
or the predefined
value transparent.

border-top-style Declares the style of the top border. none div { border-top-style:solid; }
hidden
dotted div { border-top-style:inset; }
dashed
solid
double
groove
ridge
inset
outset

border-top-width Declares the width of the top border. Lengths or the div { border-top-width:2px; }
following predefined
values: div { border-top-width:thin; }

thin
3|Page CSS Properties(Developed by Zahid Javed)

medium
thick

border-top Used as a shorthand property to set all the border-top Separate values by a div { border-top:2px solid green; }
properties at once. space in the following
order (those that are div { border-top:thick double #00FF00; }
not defined will use
inherited or default
initial values):

border-top-width
border-top-style
border-top-color

border-right-color Declares the color of the right border. Valid color names, div { border-right-color:green; }
RGB values,
hexidecimal notation, div { border-right-color:#00FF00; }
or the predefined
value transparent.

border-right-style Declares the style of the right border. none div { border-right-style:solid; }
hidden
dotted div { border-right-style:inset; }
dashed
solid
double
groove
ridge
inset
outset

border-right-width Declares the width of the right border. Lengths or the div { border-right-width:2px; }
following predefined
values: div { border-right-width:thin; }

thin
medium
thick

border-right Used as a shorthand property to set all the border- Separate values by a div { border-right:2px solid green; }
4|Page CSS Properties(Developed by Zahid Javed)

right properties at once. space in the following

order (those that are div { border-right:thick double #00FF00; }
not defined will use
inherited or default
initial values):

border-right-width
border-right-style
border-right-color

border-bottom-color Declares the color of the bottom border. Valid color names, div { border-bottom-color:green; }
RGB values,
hexidecimal notation, div { border-bottom-color:#00FF00; }
or the predefined
value transparent.

border-bottom-style Declares the style of the bottom border. none div { border-bottom-style:solid; }
hidden
dotted div { border-bottom-style:inset; }
dashed
solid
double
groove
ridge
inset
outset

border-bottom-width Declares the width of the bottom border. Lengths or the div { border-bottom-width:2px; }
following predefined
values: div { border-bottom-width:thin; }

thin
medium
thick

border-bottom Used as a shorthand property to set all the border- Separate values by a div { border-bottom:2px solid green; }
bottom properties at once. space in the following
order (those that are div { border-bottom:thick double #00FF00; }
not defined will use
inherited or default
5|Page CSS Properties(Developed by Zahid Javed)

initial values):

border-bottom-width
border-bottom-style
border-bottom-color

border-left-color Declares the color of the left border. Valid color names, div { border-left-color:green; }
RGB values,
hexidecimal notation, div { border-left-color:#00FF00; }
or the predefined
value transparent.

border-left-style Declares the style of the left border. none div { border-left-style:solid; }
hidden
dotted div { border-left-style:inset; }
dashed
solid
double
groove
ridge
inset
outset

border-left-width Declares the width of the left border. Lengths or the div { border-left-width:2px; }
following predefined
values: div { border-left-width:thin; }

thin
medium
thick

border-left Used as a shorthand property to set all the border-left Separate values by a div { border-left:2px solid green; }
properties at once. space in the following
order (those that are div { border-left:thick double #00FF00; }
not defined will use
inherited or default
initial values):

border-left-width
border-left-style
6|Page CSS Properties(Developed by Zahid Javed)

border-left-color

border-color Declares the border color of all four borders at once. Valid color names, div { border-color:green red blue olive; }
RGB values,
hexidecimal notation, div { border-color:green; }
or the predefined
value transparent. div { border-color:green red; }

Separate the color for div { border-color:green red blue; }

each border by a
space, declaring the
colors for the borders
in the following order:

border-top-color
border-right-color
border-bottom-color
border-left-color

Undeclared values
work as further
shorthand notation. If
only one color value is
declared, all four
borders will use that
color. If two colors are
declared, the top and
bottom borders will
use the first color while
the right 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.
7|Page CSS Properties(Developed by Zahid Javed)

border-style Declares the border style of all four borders at once. none div { border-style:solid dotted dashed double; }
hidden
dotted div { border-style:solid; }
dashed
solid
div { border-style:solid dotted; }
double
groove
ridge div { border-style:solid dotted dashed; }
inset
outset

Undeclared values
work as further
shorthand notation. If
only one style value is
declared, all four
borders will use that
style. If two styles are
declared, 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.

border-width Declares the width of all four borders at once. Lengths or the div { border-width:1px 3px 5px 2px; }
following predefined
values: div { border-width:thin; }

thin div { border-width:2px 4px; }

medium
div { border-width:2px 4px 5px; }
8|Page CSS Properties(Developed by Zahid Javed)

thick

Undeclared values
work as further
shorthand notation. If
only one width value is
declared, all four
borders will use that
width. If two widths are
declared, the top and
bottom borders will
use the first width
while the right and left
borders will use the
second width. If three
widths are declared,
the 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.

border Used as a shorthand to declare the border properties Separate values by a div { border:1px double green; }
when all four borders will have the same appearance. space in the following
order (those that are div { border:thin solid #00FF00; }
not defined will use
inherited or default
initial values):

border-width
border-style
border-color

Classification and Positioning Properties

Property Description Possible Values Examples

9|Page CSS Properties(Developed by Zahid Javed)

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

cursor Declares the type of cursor to be displayed. URL values, and the div { cursor:crosshair; }
following prefefined
values: div { cusrsor:url(image.csr); }

auto div { cusrsor:url(image.csr), pointer; }

crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

display Declares if/how the element displays. none div { display:none; }

inline
block div { display:inline; }
list-item
run-in
div { display:marker; }
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
10 | P a g e CSS Properties(Developed by Zahid Javed)

table-column
table-cell
table-caption

float Declares whether a box should float to the left or right of other left div { float:left; }
content, or whether it should not be floated at all. right
none div { float:right; }

visibility Declares the visibility of boxes generated by an element. visible div { visibility:visible; }
hidden
collapse div { visibility:hidden; }

top Declares the distance that the top content edge of the Lengths, percentages, div { top:15px; }
element is offset below the top edge of its containing block. and the predefined
The position property of the element must also be set to a value auto. div { top:2%; }
value other than static.

right Declares the distance that the right content edge of the Lengths, percentages, div { right:15px; }
element is offset to the left of the right edge of its containing and the predefined
block. The position property of the element must also be set value auto. div { right:2%; }
to a value other thanstatic.

bottom Declares the distance that the bottom content edge of the Lengths, percentages, div { bottom:15px; }
element is offset above the bottom edge of its containing and the predefined
block. The position property of the element must also be set value auto. div { bottom:2%; }
to a value other thanstatic.

left Declares the distance that the left content edge of the Lengths, percentages, div { left:15px; }
element is offset to the right of the left edge of its containing and the predefined
block. The position property of the element must also be set value auto. div { left:2%; }
to a value other thanstatic.

position Declares the type of positioning of an element. static div { position:absolute; }

relative
absolute div { position:relative; }
fixed

clip Declares the shape of a clipped region when the value of Shapes, or the div { clip:auto; }
the overflow property is set to a value other thanvisible. predefined valueauto.
div { clip:rect(2px, 4px, 7px, 5px); }
11 | P a g e CSS Properties(Developed by Zahid Javed)

In CSS 2, the only valid

shape is a rectangle,
using the following
format to specify the
offset lengths from
each side of the box:

rect(top, right, bottom, l

eft)

overflow Declares how content that overflows the element's box is visible div { overflow:hidden; }
handled. hidden
scroll div { overflow:scroll; }
auto

vertical-align Declares the vertical alignment of an inline-level element or a Lengths, percentages, span { vertical-align:middle; }
table cell. and the following
predefined values: td { vertical-align:top; }

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

z-index Declares the stack order of the element. Integer values and the div { z-index:2; }
predefined value auto.
div { z-index:auto; }
12 | P a g e CSS Properties(Developed by Zahid Javed)

Dimension Properties

Property Description Possible Values Examples

height Declares the height of the element. Lengths, percentages, div { height:200px; }
and the predefined
value auto. div { height:50%; }

max-height Declares the maximum height of the element. Lengths, percentages, div { max-height:200px; }
and the predefined
value auto. div { max-height:50%; }

min-height Declares the minimum height of the element. Lengths, percentages, div { min-height:200px; }
and the predefined
value auto. div { min-height:50%; }

width Declares the width of the element. Lengths, percentages, div { width:500px; }
and the predefined
value auto. div { width:75%; }

max-width Declares the maximum width of the element. Lengths, percentages, div { max-width:500px; }
and the predefined
value auto. div { max-width:75%; }

min-width Declares the minimum width of the element. Lengths, percentages, div { min-width:500px; }
and the predefined
value auto. div { min-width:75%; }
13 | P a g e CSS Properties(Developed by Zahid Javed)

Font Properties

Property Description Possible Values Examples

font-family Declares the name of the font to be used. Previously set in Valid font family names div { font-family:Arial; }
HTML via the face attribute in a <font> tag. or generic family names,
i.e. Arial, Verdana, sans- div { font-family:Arial, Helvetica, sans-serif; }
serif, "Times New
Roman", Times, serif,
etc.

Font family names can

be separated by a
comma in the same
declaration to allow
additional and/or generic
family names to be used
if the prefereed font is
unable to be displayed.

font-size Declares the size of the font. Previously set in HTML via Lengths (number and unit div { font-size:70%; }
the size attribute in a <font> tag. type—
i.e. 1em, 12pt,10px, 80%) div { font-size:0.85em; }
or one of the following
predefined values: div { font-size:medium; }

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

font-size-adjust Limited browser support: Was part of CSS 2, but not in Numeric value div { font-size-adjust:0.54; }
CSS 2.1. This property may return in CSS 3.
div { font-size-adjust:0.46; }
14 | P a g e CSS Properties(Developed by Zahid Javed)

Declares the aspect value(font size divided by x-height).

font-stretch Limited browser support: Was part of CSS 2, but not in normal div { font-stretch:narrower; }
CSS 2.1. This property may return in CSS 3. wider
narrower div { font-stretch:ultra-expanded; }
Declares the stretch of the font face. ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

font-style Declares the font style. normal div { font-style:italic; }

italic
oblique div { font-style:oblique; }

font-variant Declares the font variant. normal div { font-variant:normal; }

small-caps
div { font-variant:small-caps; }

font-weight Declares the font weight (lightness or boldness) normal div { font-weight:bolder; }
bold
bolder div { font-weight:200; }
lighter
100
200
300
400
500
600
700
800
900

font Used as a shorthand property to declare all of the font Separate values by a div { font:italic small-caps bold 1em 1.2em Arial }
properties at once (except font-size-adjust and font- space in the following
stretch). order (those that are not
15 | P a g e CSS Properties(Developed by Zahid Javed)

defined will use inherited

or default initial values): div { font:bold 0.8em Verdana }

font-style
font-variant
font-weight
font-size
line-height
font-family

Generated Content Properties

Property Description Possible Values Examples

content Generates content in the document in conjunction with String values, URL div:before { content:"some text"; }
the :before and :afterpseudo-elements. values, and predefined
value formats: div:after { content:url(page2.html); }

counter(name)
counter(name, list-style-ty
pe)
counters(name, string)
counters(name, string, list
-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote

counter-increment Declares the counter increment for each instance of a Integers and the
selector. predefined value none.

counter-reset Declares the value the counter is set to on each Integers and the
instance of a selector. predefined value none.

quotes Declares the type of quotation marks to use for String values and the
quotations and embedded quotations. predefined value none.
16 | P a g e CSS Properties(Developed by Zahid Javed)

List Properties

Property Description Possible Values Examples

list-style-type Declares the type of list marker used. disc ol { list-style-type:upper-roman; }

circle
square ul { list-style-type:square; }
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

list-style-position Declares the position of the list marker. inside ol { list-style-position:inside; }

outside
ul { list-style-position:outside; }

list-style-image Declares an image to be used as the list marker. URL values. ul { list-style-image:url(image.jpg); }

list-style Shorthand property to declare three list properties at Separate values by a ul { list-style:disc inside url(image.gif); }
once. space in the following
order (those that are not ol { list-style:upper-roman outside; }
defined will use inherited
or default initial values):

list-style-type
list-style-position
17 | P a g e CSS Properties(Developed by Zahid Javed)

list-style-image

marker-offset Declares the marker offset for elements with a value Lengths and the li:before { display:marker; marker-offset:5px; }
ofmarker set for the displayproperty. predefined value auto.

Margin Properties

Property Description Possible Values Examples

margin-top Declares the top margin for the element. Lengths, percentages, div { margin-top:5px; }
and the predefined
value auto. div { margin-top:15%; }

margin-right Declares the right margin for the element. Lengths, percentages, div { margin-right:5px; }
and the predefined
value auto. div { margin-right:15%; }

margin-bottom Declares the bottom margin for the element. Lengths, percentages, div { margin-bottom:5px; }
and the predefined
value auto. div { margin-bottom:15%; }

margin-left Declares the left margin for the element. Lengths, percentages, div { margin-left:5px; }
and the predefined
value auto. div { margin-left:15%; }

margin Shorthand property used to declare all the margin Separate values by a div { margin:5px 12px 4px 7px; }
properties at once. space in the following
order (those that are not div { margin:5px; }
defined will use inherited
or default initial values): div { margin:5px 10px; }

margin-top
div { margin:5px 7px 4px; }
margin-right
margin-bottom
margin-left

Undeclared values work

18 | P a g e CSS Properties(Developed by Zahid Javed)

as further shorthand
notation. If only one
length value is declared,
all four margins will use
that length. If two lengths
are declared, the top and
bottom margins will use
the first length while the
right and left margins will
use the second length. If
three lengths are
declared, the top margin
will use the first length,
the right and left margins
will use the second
length, and the bottom
margin will use the third
length.

Outline Properties

Property Description Possible Values Examples

outline-color Declares the outline color. Valid color names, RGB div { outline-color:green; }
values, hexidecimal
notation. div { outline-color:#00FF00; }

outline-style Declares the style of the outline. none div { outline-style:solid; }

dotted
dashed div { outline-style:inset; }
solid
double
groove
ridge
inset
outset

outline-width Declares the width of the outline. Lengths or the following div { outline-width:2px; }
19 | P a g e CSS Properties(Developed by Zahid Javed)

predefined values:
div { outline-width:thin; }
thin
medium
thick

outline Used as a shorthand property to set all the background Separate values by a div { outline:green solid 2px; }
properties at once. space in the following
order (those that are not div { outline:#00FF00 double thick; }
defined will use inherited
or default initial values):

outline-color
outline-style
outline-width

Padding Properties

Property Description Possible Values Examples

padding-top Declares the top padding for the element. Lengths, percentages, div { padding-top:5px; }
and the predefined
value auto. div { padding-top:15%; }

padding-right Declares the right padding for the element. Lengths, percentages, div { padding-right:5px; }
and the predefined
value auto. div { padding-right:15%; }

padding-bottom Declares the bottom padding for the element. Lengths, percentages, div { padding-bottom:5px; }
and the predefined
value auto. div { padding-bottom:15%; }

padding-left Declares the left padding for the element. Lengths, percentages, div { padding-left:5px; }
and the predefined
value auto. div { padding-left:15%; }

padding Shorthand property used to declare all the margin properties at once. Separate values by a div { padding:5px 12px 4px 7px; }
20 | P a g e CSS Properties(Developed by Zahid Javed)

space in the following

order (those that are not div { padding:5px; }
defined will use inherited
or default initial values): div { padding:5px 10px; }

padding-top
div { padding:5px 7px 4px; }
padding-right
padding-bottom
padding-left

Undeclared values work

as further shorthand
notation. If only one
length value is declared,
all four sides will use that
length. If two lengths are
declared, the top and
bottom sides will use the
first length while the right
and left sides will use the
second 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.
21 | P a g e CSS Properties(Developed by Zahid Javed)

Page Properties

Property Description Possible Values Examples

marks Declares the type of marks to display outside the page box. crop @page { marks:crop; }
cross

orphans Declares the minimum number of lines of a paragraph that must Integers @page { orphans:2; }
be left at the bottom of a page.

page Declares the type of page where an element should be displayed. Indentifiers

page-break-after Declares a page break. auto

always
avoid
left
right

page-break-before Declares a page break. auto

always
avoid
left
right

page-break-inside Declares a page break. auto

avoid

size Declares the size and orientation of a page box. Lengths, and the
following predefined
values:

auto
landscape
potrait

widows Declares the minimum number of lines of a paragraph that must Integers @page { widows:2; }
be left at the top of a page.
22 | P a g e CSS Properties(Developed by Zahid Javed)

Table Properties
Property Description Possible Values Examples

border-collapse Declares the way borders are displayed. collapse table { border-collapse:collapse; }
separate
table { border-collapse:separate; }

border-spacing Declares the distance separating borders (ifborder- Lengths for the table { border-spacing:5px; }
collapse isseparate). horizontal and vertical
spacing, separated by a table { border-spacing:5px 10px; }
space.

If one length is value is

declared, that length is
used for both the
horizontal and vertical
spacing. If two lengths
are declared, the first
one is used for
horizontal spacing and
the second one is used
for vertical spacing.

caption-side Declares where the table caption is displayed in relation to the table. top caption { caption-side:top; }
bottom
left caption { caption-side:right; }
right

empty-cells Declares the way empty cells are displayed (if border- show table { empty-cells:show; }
collapse isseparate). hide
table { empty-cells:hide; }

table-layout Declares the type of table layout. auto table { table-layout:auto; }

fixed
table { table-layout:fixed; }
23 | P a g e CSS Properties(Developed by Zahid Javed)

Text Properties

Property Description Possible Values Examples

color Declares the color of the text. Valid color names, RGB div { color:green; }
values, hexidecimal
notation. div {color:rgb(0,255,0);}

The predefined color div { color:#00FF00; }

names are:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

direction Declares the reading direction of the text. ltr div { direction:ltr; }
rtl
div { direction:rtl; }
ltr = left-to-right
rtl = right-to-left

line-height Declares the distance between lines. Numbers, percentages, div { line-height:normal; }
lengths, and the
predefined value div { line-height:2em; }
of normal.
24 | P a g e CSS Properties(Developed by Zahid Javed)

div { line-height:125%; }

letter-spacing Declares the amount of space between text characters. A length (in addition to div { letter-spacing:normal; }
the default space) or the
predefined value div { letter-spacing:5px; }
of normal.
div { letter-spacing:-1px; }

text-align Declares the horizontal alignment of inline content. left div { text-align:center; }
right
center div { text-align:right; }
justify
td { text-align:"."; }
If used on a set of table
cells, this property can
be given a string value
to which the text of each
row of the column will be
aligned.

text-decoration Declares the text decoration. none div { text-decoration:none; }

underline
overline div { text-decoration:underline; }
line-through
blink

text-indent Declares the indentation of the first line of text. Lengths and div { text-indent:12px; }
percentages.
div { text-indent:2%; }

text-shadow Declares shadow effects on the text. A list containg a color div { text-shadow:green 2px 2px 7px; }
followed by numeric
values (separated by div { text-shadow:olive -3px -4px 5px; }
spaces) that specify:

1. The color for the

shadow effect
2. Horizontal
distance to the
25 | P a g e CSS Properties(Developed by Zahid Javed)

right of the text

3. Vertical distance
below the text
4. Blur radius

text-transform Declares the capitalization effects on the letters in the text. none div { text-transform:uppercase; }
capitalize
uppercase div { text-transform:lowercase; }
lowercase

unicode-bidi Declares values relating to bidirectional text. May be used in normal div { unicode-bidi:embed; }
conjunction with the thedirection property. embed
bidi-override div { unicode-bidi:bidi-override; }

white-space Declares how white space is handled in an element. normal div { white-space:pre; }
pre
nowrap div { white-space:nowrap; }

word-spacing Declares the space between words in the text. A length (in addition to div { word-spacing:normal; }
the default space) or the
predefined value div { word-spacing:1.5em; }
of normal.

Other Properties

Property Description Possible Values Examples

azimuth Declares the angle that sound travels to the listener. Angle values in degrees div { azimuth:90deg; }
(deg), or one of the
following predefined div { azimuth:behind; }
values:

left-side
far-left
left
center-left
26 | P a g e CSS Properties(Developed by Zahid Javed)

center
center-right
right
far-right
right-side
behind
leftwards
rightwards

cue-after Declares an audio cue to play after an element. URL values and the div { cue-after:url(sound.wav); }
predefined value none.
div { cue-after:none; }

cue-before Declares an audio cue to play before an element. URL values and the div { cue-before:url(sound.wav); }
predefined value none.
div { cue-before:none; }

cue Shorthand proerty to set both cue values at once. URL values and the div { cue:url(sound.wav) url(sound2.wav); }
predefined value none.
Separate the values by a div { cue:url(sound.wav); }
space in the following
order:

cue-before
cue-after

If only one cue value is

declared, it is used for
both before and after.

elevation Declares the elevation of a sound. Angle values in degrees div { elevation:30deg; }
(deg), or one of the
following predefined div { elevation:higher; }
values:

below
level
above
higher
27 | P a g e CSS Properties(Developed by Zahid Javed)

lower

pause-after Declares the amount of time to pause after an element. Time in milliseconds div { pause-after:100ms; }
(ms) or percentages.
div { pause-after:20%; }

pause-before Declares the amount of time to pause before an element. Time in milliseconds div { pause-before:100ms; }
(ms) or percentages.
div { pause-before:20%; }

pause Shorthand proerty to set both pause values at once. Separate the values by a div { pause:200ms 100ms; }
space in the following
order: div { pause:100ms; }

pause-before
pause-after

If only one pause value

is declared, it is used for
both before and after.

pitch Declares the average speaking pitch of a voice. Frequencies in hertz div { pitch:120Hz; }
(Hz) or the following
predefined values: div { pitch:high; }

x-low
low
medium
high
x-high

pitch-range Declares a change in the pitch range of a voice. Number values between div { pitch-range:50; }
0 and 100 (lower values
indicate a flat voice while div { pitch-range:99; }
higher values indicate an
animated voice).

play-during Declares a background sound to be played while the current URL value, followed by div { play-during:url(music.wav); }
element is spoken. one or more of the
28 | P a g e CSS Properties(Developed by Zahid Javed)

following keywords,
separated by spaces: div { play-during:url(music.wav) repeat; }

mix div { play-during:none; }

repeat

Alternatley, one of the

following keywords:

auto
none

richness Declares the richness of the voice in spoken text. Numeric values between div { richness:50; }
0 and 100 (lower values
have less richness and div { richness:0; }
higher values have more
richness).

speak Declares if/how text is spoken. normal div { speak:none; }

none
spell-out div { speak:spell-out; }

speak-header Declares how often table header cells are spoken. once th { speak-header:once; }
always
th { speak-header:always; }

speak-numeral Declares how numerals are spoken. digits div { speak-numeral:digits; }

continuous
div { speak-numeral:continuous; }

speak-punctuation Declares how punctuation is spoken. code div { speak-punctuation:code; }

none
div { speak-punctuation:none; }

speech-rate Declares the speech rate of spoken text. A number indicating the div { speech-rate:50; }
number of words per
minute, or one of the div { speech-rate:medium; }
following predefined
values:
29 | P a g e CSS Properties(Developed by Zahid Javed)

x-slow
slow
medium
fast
x-fast
faster
slower

stress Declares the stress of the voice on spoken text. Numeric values between div { stress:50; }
0 and 100 (lower values
have less stress and div { stress:0; }
higher values have more
stress).

voice-family Declares the voice family of spoken text. Generic or specific voice
family names.

volume Declares the median volume. Numbers between 0 and div { volume:50; }
100, percentages, or
one of the following div { volume:silent; }
predefined values:

silent
x-soft
soft
medium
loud
x-loud