0% found this document useful (0 votes)
47 views

Background Properties: Property Description Possible Values Examples

The document defines CSS properties for backgrounds and borders. It lists the property name, description, possible values, and examples for each background property including background-attachment, background-color, background-image, background-position, background-repeat, and background. It also lists the same for border properties including border-top-color, border-top-style, border-top-width, border-top, and others for individual borders. The document provides a reference for CSS background and border properties and their possible values.

Uploaded by

masumi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views

Background Properties: Property Description Possible Values Examples

The document defines CSS properties for backgrounds and borders. It lists the property name, description, possible values, and examples for each background property including background-attachment, background-color, background-image, background-position, background-repeat, and background. It also lists the same for border properties including border-top-color, border-top-style, border-top-width, border-top, and others for individual borders. The document provides a reference for CSS background and border properties and their possible values.

Uploaded by

masumi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Ankit Virparia

Background Properties

Property Description Possible Examples


Values

background- Declares the fixed div { background-


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

background-color Declares the Valid color div { background-


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

background-image Declares the URL values. div { background-


background image:url(images/img.jpg
image of an ); }
element.
body { background-
image:url(img.jpg); }

background-position Declares the Lengths or div { background-


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

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

1
Ankit Virparia

bottom
right

background-repeat Declares how repeat div { background-


and/or if a repeat-x repeat:repeat-x; }
background repeat-y
image no-repeat div { background-
repeats. repeat:no-repeat; }

background Used as a Separate div { background:green


shorthand values by a url(image.jpg) no-repeat
property to space in the fixed center center; }
set all the following
background order (those div {
properties at that are not background:url(image.jpg
once. defined will ) fixed; }
use inherited
or default
initial
values):

backgroun
d-color
backgroun
d-image
backgroun
d-repeat
backgroun
d-
attachmen
t
backgroun
d-
position

Border Properties

Property Description Possible Values Examples

border-top-color Declares the Valid color names, RGB div { border-


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

border-top-style Declares the none div { border-

2
Ankit Virparia

style of the hidden top-


top border. dotted style:solid; }
dashed
solid div { border-
double top-
groove style:inset; }
ridge
inset
outset

border-top-width Declares the Lengths or the following div { border-


width of the predefined values: top-width:2px;
top border. }
thin
medium div { border-
thick top-
width:thin; }

border-top Used as a Separate values by a space in div { border-


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

border-right-color Declares the Valid color names, RGB div { border-


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

border-right-style Declares the none div { border-


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

border-right-width Declares the Lengths or the following div { border-


width of the predefined values: right-
right border. width:2px; }

3
Ankit Virparia

thin div { border-


medium right-
thick width:thin; }

border-right Used as a Separate values by a space in div { border-


shorthand the following order (those right:2px
property to that are not defined will use solid green; }
set all the inherited or default initial
border-right values): div { border-
properties at right:thick
once. border-right-width double
border-right-style #00FF00; }
border-right-color

border-bottom-color Declares the Valid color names, RGB div { border-


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

border-bottom-style Declares the none div { border-


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

border-bottom-width Declares the Lengths or the following div { border-


width of the predefined values: bottom-
bottom width:2px; }
border. thin
medium div { border-
thick bottom-
width:thin; }

border-bottom Used as a Separate values by a space in div { border-


shorthand the following order (those bottom:2px
property to that are not defined will use solid green; }
set all the inherited or default initial
border- values): div { border-
bottom bottom:thick
properties at border-bottom-width double
once. border-bottom-style #00FF00; }

4
Ankit Virparia

border-bottom-color

border-left-color Declares the Valid color names, RGB div { border-


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

border-left-style Declares the none div { border-


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

border-left-width Declares the Lengths or the following div { border-


width of the predefined values: left-
left border. width:2px; }
thin
medium div { border-
thick left-
width:thin; }

border-left Used as a Separate values by a space in div { border-


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

border-color Declares the Valid color names, RGB div { border-


border color values, hexidecimal notation, color:green
of all four or the predefined red blue
borders at value transparent. olive; }
once.
Separate the color for each div { border-
border by a space, declaring color:green; }
the colors for the borders in
the following order: div { border-
color:green
border-top-color

5
Ankit Virparia

border-right-color red; }
border-bottom-color
border-left-color div { border-
color:green
Undeclared values work as red blue; }
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.

border-style Declares the none div { border-


border style hidden style:solid
of all four dotted dotted dashed
borders at dashed double; }
once. solid
double div { border-
groove style:solid; }
ridge
inset div { border-
outset style:solid
dotted; }
Undeclared values work as
further shorthand notation. If div { border-
only one style value is style:solid
declared, all four borders will dotted dashed;
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 Lengths or the following div { border-

6
Ankit Virparia

width of all predefined values: width:1px 3px


four borders 5px 2px; }
at once. thin
medium div { border-
thick width:thin; }

Undeclared values work as div { border-


further shorthand notation. If width:2px 4px;
only one width value is }
declared, all four borders will
use that width. If two widths div { border-
are declared, the top and width:2px 4px
bottom borders will use the 5px; }
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 Separate values by a space in div {


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

Classification and Positioning Properties

Property Description Possible Examples


Values

clear Declares the side(s) of an left div { clear:right; }


element where no right
previous floating both div { clear:both; }
elements are allowed to none
be adjacent.

cursor Declares the type of URL values, div { cursor:crosshair;


cursor to be displayed. and the }
following
prefefined div {
values: cusrsor:url(image.csr);

7
Ankit Virparia

}
auto
crosshair div {
default cusrsor:url(image.csr),
pointer 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 none div { display:none; }


element displays. 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
table-
column
table-
cell
table-
caption

float Declares whether a box left div { float:left; }


should float to the left or right
right of other content, or none div { float:right; }

8
Ankit Virparia

whether it should not be


floated at all.

visibility Declares the visibility of visible div {


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

top Declares the distance that Lengths, div { top:15px; }


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

right Declares the distance that Lengths, div { right:15px; }


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

bottom Declares the distance that Lengths, div { bottom:15px; }


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

left Declares the distance that Lengths, div { left:15px; }


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

position Declares the type of static div {

9
Ankit Virparia

positioning of an relative position:absolute; }


element. absolute
fixed div {
position:relative; }

clip Declares the shape of a Shapes, or div { clip:auto; }


clipped region when the the
value of predefined div { clip:rect(2px,
the overflow property value auto. 4px, 7px, 5px); }
is set to a value other
than visible. 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,
left)

overflow Declares how content visible div { overflow:hidden;


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

vertical-align Declares the vertical Lengths, span { vertical-


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

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

10
Ankit Virparia

z-index Declares the stack order Integer div { z-index:2; }


of the element. values and
the div { z-index:auto; }
predefined
value auto.

Dimension Properties

Property Description Possible Values Examples

height Declares the height of Lengths, percentages, and div {


the element. the predefined height:200px; }
value auto.
div { height:50%;
}

max-height Declares the maximum Lengths, percentages, and div { max-


height of the element. the predefined height:200px; }
value auto.
div { max-
height:50%; }

min-height Declares the minimum Lengths, percentages, and div { min-


height of the element. the predefined height:200px; }
value auto.
div { min-
height:50%; }

width Declares the width of Lengths, percentages, and div {


the element. the predefined width:500px; }
value auto.
div { width:75%;
}

max-width Declares the maximum Lengths, percentages, and div { max-


width of the element. the predefined width:500px; }
value auto.
div { max-
width:75%; }

min-width Declares the minimum Lengths, percentages, and div { min-


width of the element. the predefined width:500px; }
value auto.
div { min-
width:75%; }

11
Ankit Virparia

Font Properties

Property Description Possible Values Examples

font-family Declares the Valid font family names or div { font-


name of the font generic family names, family:Arial; }
to be used. i.e. Arial, Verdana, sans-
Previously set in serif, "Times New div { font-
HTML via Roman", Times,serif, etc. family:Arial,
the face attribute Helvetica, sans-
in a <font> tag. Font family names can be serif; }
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 Lengths (number and unit div { font-
of the font. type size:70%; }
Previously set in i.e. 1em, 12pt, 10px, 80%)
HTML via or one of the following div { font-
the sizeattribute predefined values: size:0.85em; }
in a <font> tag.
xx-small div { font-
x-small size:medium; }
small
medium
large
x-large
xx-large
smaller
larger

font-size-adjust Limited browser Numeric value div { font-size-


support: Was adjust:0.54; }
part of CSS 2,
but not in CSS div { font-size-
2.1. This adjust:0.46; }
property may
return in CSS 3.

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

font-stretch Limited browser normal div { font-


support: Was wider stretch:narrower;

12
Ankit Virparia

part of CSS 2, narrower }


but not in CSS ultra-condensed
2.1. This extra-condensed div { font-
property may condensed stretch:ultra-
return in CSS 3. semi-condensed expanded; }
semi-expanded
Declares the expanded
stretch of the font extra-expanded
face. ultra-expanded

font-style Declares the font normal div { font-


style. italic style:italic; }
oblique
div { font-
style:oblique; }

font-variant Declares the font normal div { font-


variant. small-caps variant:normal; }

div { font-
variant:small-
caps; }

font-weight Declares the font normal div { font-


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

font Used as a Separate values by a space div { font:italic


shorthand in the following order small-caps bold
property to (those that are not defined 1em 1.2em Arial }
declare all of the will use inherited or default
font properties at initial values): div { font:bold
once (except 0.8em Verdana }
font-size-adjust font-style
and font-stretch). font-variant
font-weight
font-size
line-height
font-family

13
Ankit Virparia

Generated Content Properties

Property Description Possible Examples


Values

content Generates content in the String values, div:before {


document in conjunction URL values, content:"some
with and predefined text"; }
the :before and :after value formats:
pseudo-elements. div:after {
counter(na content:url(page2.
me) html); }
counter(na
me, list-
style-
type)
counters(n
ame,
string)
counters(n
ame,
string,
list-
style-
type)
attr(X)
open-quote
close-
quote
no-open-
quote
no-close-
quote

counter- Declares the counter Integers and the More Information


increment increment for each instance predefined
of a selector. value none.

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

quotes Declares the type of String values More Information


quotation marks to use for and the
quotations and embedded predefined
quotations. value none.

14
Ankit Virparia

List Properties

Property Description Possible Examples


Values

list-style-type Declares the type of disc ol { list-style-


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

list-style- Declares the position inside ol { list-style-


position of the list marker. outside position:inside; }

ul { list-style-
position:outside; }

list-style-image Declares an image to URL values. ul { list-style-


be used as the list image:url(image.jpg)
marker. ; }

list-style Shorthand property to Separate values ul { list-style:disc


inside

15
Ankit Virparia

declare three list by a space in url(image.gif); }


properties at once. the following
order (those ol { list-
that are not style:upper-roman
defined will use outside; }
inherited or
default initial
values):

list-
style-type
list-
style-
position
list-
style-
image

marker-offset Declares the marker Lengths and the li:before {


offset for elements predefined display:marker;
with a value value auto. marker-offset:5px; }
of marker set for
thedisplay property
.

Margin Properties

Property Description Possible Values Examples

margin-top Declares the top Lengths, percentages, and the div {


margin for the predefined value auto. margin-
element. top:5px; }

div {
margin-
top:15%; }

margin-right Declares the Lengths, percentages, and the div {


right margin for predefined value auto. margin-
the element. right:5px; }

div {
margin-
right:15%; }

margin-bottom Declares the Lengths, percentages, and the div {


bottom margin predefined value auto. margin-
for the element. bottom:5px;
}

16
Ankit Virparia

div {
margin-
bottom:15%;
}

margin-left Declares the left Lengths, percentages, and the div {


margin for the predefined value auto. margin-
element. left:5px; }

div {
margin-
left:15%; }

margin Shorthand Separate values by a space in the div {


property used to following order (those that are not margin:5px
declare all the defined will use inherited or default 12px 4px
margin initial values): 7px; }
properties at
once. margin-top div {
margin-right margin:5px;
margin-bottom }
margin-left
div {
Undeclared values work as further margin:5px
shorthand notation. If only one 10px; }
length value is declared, all four
margins will use that length. If two div {
lengths are declared, the top and margin:5px
bottom margins will use the first 7px 4px; }
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 Valid color names, RGB div { outline-
color. values, hexidecimal color:green; }
notation.
div { outline-
color:#00FF00; }

outline-style Declares the style of none div { outline-

17
Ankit Virparia

the outline. dotted style:solid; }


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

outline-width Declares the width Lengths or the following div { outline-


of the outline. predefined values: width:2px; }

thin div { outline-


medium width:thin; }
thick

outline Used as a shorthand Separate values by a div {


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

Padding Properties

Property Description Possible Values Examples

padding-top Declares the top Lengths, percentages, and the div {


padding for the predefined value auto. padding-
element. top:5px; }

div {
padding-
top:15%; }

padding-right Declares the Lengths, percentages, and the div {


right padding predefined value auto. padding-
for the element. right:5px; }

div {
padding-
right:15%; }

padding-bottom Declares the Lengths, percentages, and the div {


bottom padding predefined value auto. padding-
for the element. bottom:5px; }

18
Ankit Virparia

div {
padding-
bottom:15%; }

padding-left Declares the Lengths, percentages, and the div {


left padding for predefined value auto. padding-
the element. left:5px; }

div {
padding-
left:15%; }

padding Shorthand Separate values by a space in the div {


property used to following order (those that are not padding:5px
declare all the defined will use inherited or 12px 4px 7px;
margin default initial values): }
properties at
once. padding-top div {
padding-right padding:5px;
padding-bottom }
padding-left
div {
Undeclared values work as further padding:5px
shorthand notation. If only one 10px; }
length value is declared, all four
sides will use that length. If two div {
lengths are declared, the top and padding:5px
bottom sides will use the first 7px 4px; }
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.

Page Properties

Property Description Possible Values Examples

marks Declares the type of marks to crop @page {


display outside the page box. cross marks:crop; }

orphans Declares the minimum Integers @page {


number of lines of a orphans:2; }
paragraph that must be left at
the bottom of a page.

19
Ankit Virparia

page Declares the type of page Indentifiers More Information


where an element should be
displayed.

page-break-after Declares a page break. auto More Information


always
avoid
left
right

page-break-before Declares a page break. auto More Information


always
avoid
left
right

page-break-inside Declares a page break. auto More Information


avoid

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

auto
landscape
potrait

widows Declares the minimum Integers @page {


number of lines of a widows:2; }
paragraph that must be left at
the top of a page.

Table Properties

Property Description Possible Examples


Values

border-collapse Declares the way borders are collapse table { border-


displayed. separate collapse:collapse;
}

table { border-
collapse:separate;
}

border-spacing Declares the distance Lengths for table { border-


separating borders the horizontal spacing:5px; }
(ifborder- and vertical
collapse is separate). spacing, table { border-
separated by a spacing:5px 10px;

20
Ankit Virparia

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 top caption { caption-


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

empty-cells Declares the way empty show table { empty-


cells are displayed hide cells:show; }
(ifborder-
collapse is separate). table { empty-
cells:hide; }

table-layout Declares the type of table auto table { table-


layout. fixed layout:auto; }

table { table-
layout:fixed; }

Text Properties

Property Description Possible Values Examples

color Declares the color Valid color names, div { color:green; }


of the text. RGB values,
hexidecimal div
notation. { color:rgb(0,255,0);
}
The predefined

21
Ankit Virparia

color names are: div { color:#00FF00;


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

direction Declares the reading ltr div { direction:ltr;


direction of the text. rtl }

ltr = left-to-right div { direction:rtl;


rtl = right-to-left }

line-height Declares the Numbers, div { line-


distance between percentages, height:normal; }
lines. lengths, and the
predefined value div { line-
of normal. height:2em; }

div { line-
height:125%; }

letter-spacing Declares the amount A length (in div { letter-


of space between addition to the spacing:normal; }
text characters. default space) or the
predefined value div { letter-
of normal. spacing:5px; }

div { letter-
spacing:-1px; }

text-align Declares the left div { text-


horizontal alignment right align:center; }
of inline content. center
justify div { text-
align:right; }
If used on a set of
table cells, this td { text-align:".";
property can be }

22
Ankit Virparia

given a string value


to which the text of
each row of the
column will be
aligned.

text- Declares the text none div { text-


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

text-indent Declares the Lengths and div { text-


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

text-shadow Declares shadow A list containg a div { text-


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

text- Declares the none div { text-


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

unicode-bidi Declares values normal div { unicode-


relating to embed bidi:embed; }
bidirectional text. bidi-override

23
Ankit Virparia

May be used in
conjunction with the div { unicode-
the direction propert bidi:bidi-override; }
y.

white-space Declares how white normal div { white-


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

word-spacing Declares the space A length (in div { word-


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

Other Properties

Property Description Possible Values Examples

azimuth Declares the Angle values in div { azimuth:90deg; }


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

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

cue-after Declares an URL values and div { cue-


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

cue-before Declares an URL values and div { cue-

24
Ankit Virparia

audio cue to the predefined before:url(sound.wav);


play before an value none. }
element.
div { cue-before:none;
}

cue Shorthand URL values and div {


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

cue-before
cue-after

If only one cue


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

elevation Declares the Angle values in div { elevation:30deg;


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

below
level
above
higher
lower

pause-after Declares the Time in div { pause-


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

pause-before Declares the Time in div { pause-


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

pause Shorthand Separate the values div { pause:200ms


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

25
Ankit Virparia

pause-after

If only one pause


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

Pitch Declares the Frequencies in div { pitch:120Hz; }


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

x-low
low
medium
high
x-high

pitch-range Declares a Number values div { pitch-range:50;


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

play-during Declares a URL value, div { play-


background followed by one or during:url(music.wav);
sound to be more of the }
played while following
the current keywords, div { play-
element is separated by during:url(music.wav)
spoken. spaces: repeat; }

mix div { play-


repeat during:none; }

Alternatley, one of
the following
keywords:

auto
none

richness Declares the Numeric values div { richness:50; }


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

26
Ankit Virparia

speak Declares normal div { speak:none; }


if/how text is none
spoken. spell-out div { speak:spell-out;
}

speak-header Declares how once th { speak-


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

speak-numeral Declares how digits div { speak-


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

speak-punctuation Declares how code div { speak-


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

speech-rate Declares the A number div { speech-rate:50;


speech rate of indicating the }
spoken text. number of words
per minute, or one div { speech-
of the following rate:medium; }
predefined values:

x-slow
slow
medium
fast
x-fast
faster
slower

stress Declares the Numeric values div { stress:50; }


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

voice-family Declares the Generic or specific


voice family voice family
of spoken text. names.

volume Declares the Numbers between div { volume:50; }


median 0 and 100,

27
Ankit Virparia

volume. percentages, or one


of the following div { volume:silent; }
predefined values:

silent
x-soft
soft
medium
loud
x-loud

28

You might also like