Generated Content Properties

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

List Properties

Property	Description	Possible Values	Examples
list-style-type	Declares the type of list marker used.	disc circle 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	ol { list-style-type:upper-roman; }ul { list-style-type:square; }
list-style-position	Declares the position of the list marker.	inside outside	ol { list-style-position:inside; }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 once.	Separate values by a space in the following order (those that are not defined will use inherited or default initial values): list-style-type list-style-position list-style-image	ul { list-style:disc inside url(image.gif); }ol { list-style:upper-roman outside; }
marker-offset	Declares the marker offset for elements with a value ofmarker set for the displayproperty.	Lengths and the predefined value auto.	li:before { display:marker; marker-offset:5px; }

Margin Properties

Property	Description	Possible Values	Examples
margin-top	Declares the top margin for the element.	Lengths, percentages, and the predefined value auto.	div { margin-top:5px; }div { margin-top:15%; }
margin-right	Declares the right margin for the element.	Lengths, percentages, and the predefined value auto.	div { margin-right:5px; }div { margin-right:15%; }
margin-bottom	Declares the bottom margin for the element.	Lengths, percentages, and the predefined value auto.	div { margin-bottom:5px; }div { margin-bottom:15%; }
margin-left	Declares the left margin for the element.	Lengths, percentages, and the predefined value auto.	div { margin-left:5px; }div { margin-left:15%; }
margin	Shorthand property used to declare all the margin properties at once.	Separate values by a space in the following order (those that are not defined will use inherited or default initial values): margin-top margin-right margin-bottom margin-left Undeclared values work 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.	div { margin:5px 12px 4px 7px; }div { margin:5px; } div { margin:5px 10px; } div { margin:5px 7px 4px; }

Outline Properties

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

Padding Properties

Property	Description	Possible Values	Examples
padding-top	Declares the top padding for the element.	Lengths, percentages, and the predefined value auto.	div { padding-top:5px; }div { padding-top:15%; }
padding-right	Declares the right padding for the element.	Lengths, percentages, and the predefined value auto.	div { padding-right:5px; }div { padding-right:15%; }
padding-bottom	Declares the bottom padding for the element.	Lengths, percentages, and the predefined value auto.	div { padding-bottom:5px; }div { padding-bottom:15%; }
padding-left	Declares the left padding for the element.	Lengths, percentages, and the predefined value auto.	div { padding-left:5px; }div { padding-left:15%; }
padding	Shorthand property used to declare all the margin properties at once.	Separate values by a space in the following order (those that are not defined will use inherited or default initial values): padding-top 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.	div { padding:5px 12px 4px 7px; }div { padding:5px; } div { padding:5px 10px; } div { padding:5px 7px 4px; }

Page Properties

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

Table Properties

Property	Description	Possible Values	Examples
border-collapse	Declares the way borders are displayed.	collapse separate	table { border-collapse:collapse; }table { border-collapse:separate; }
border-spacing	Declares the distance separating borders (ifborder-collapseis separate).	Lengths for the horizontal and vertical spacing, separated by a 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.	table { border-spacing:5px; }table { border-spacing:5px 10px; }
caption-side	Declares where the table caption is displayed in relation to the table.	top bottom left right	caption { caption-side:top; }caption { caption-side:right; }
empty-cells	Declares the way empty cells are displayed (if border-collapse isseparate).	show hide	table { empty-cells:show; }table { empty-cells:hide; }
table-layout	Declares the type of table layout.	auto fixed	table { table-layout:auto; }table { table-layout:fixed; }

Text Properties

Property	Description	Possible Values	Examples
color	Declares the color of the text.	Valid color names, RGB values, hexidecimal notation.The predefined color names are: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow	div { color:green; }div {color:rgb(0,255,0);} div { color:#00FF00; }
direction	Declares the reading direction of the text.	ltr rtl ltr = left-to-right rtl = right-to-left	div { direction:ltr; }div { direction:rtl; }
line-height	Declares the distance between lines.	Numbers, percentages, lengths, and the predefined value of normal.	div { line-height:normal; }div { line-height:2em; } div { line-height:125%; }
letter-spacing	Declares the amount of space between text characters.	A length (in addition to the default space) or the predefined value of normal.	div { letter-spacing:normal; }div { letter-spacing:5px; } div { letter-spacing:-1px; }
text-align	Declares the horizontal alignment of inline content.	left right center justify 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.	div { text-align:center; }div { text-align:right; } td { text-align:"."; }
text-decoration	Declares the text decoration.	none underline overline line-through blink	div { text-decoration:none; }div { text-decoration:underline; }
text-indent	Declares the indentation of the first line of text.	Lengths and percentages.	div { text-indent:12px; }div { text-indent:2%; }
text-shadow	Declares shadow effects on the text.	A list containg a color followed by numeric values (separated by spaces) that specify: The color for the shadow effect Horizontal distance to the right of the text Vertical distance below the text Blur radius	div { text-shadow:green 2px 2px 7px; }div { text-shadow:olive -3px -4px 5px; }
text-transform	Declares the capitalization effects on the letters in the text.	none capitalize uppercase lowercase	div { text-transform:uppercase; }div { text-transform:lowercase; }
unicode-bidi	Declares values relating to bidirectional text. May be used in conjunction with the the directionproperty.	normal embed bidi-override	div { unicode-bidi:embed; }div { unicode-bidi:bidi-override; }
white-space	Declares how white space is handled in an element.	normal pre nowrap	div { white-space:pre; }div { white-space:nowrap; }
word-spacing	Declares the space between words in the text.	A length (in addition to the default space) or the predefined value of normal.	div { word-spacing:normal; }div { word-spacing:1.5em; }

Other Properties

Property	Description	Possible Values	Examples
azimuth	Declares the angle that sound travels to the listener.	Angle values in degrees (deg), or one of the following predefined values: left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards	div { azimuth:90deg; }div { azimuth:behind; }
cue-after	Declares an audio cue to play after an element.	URL values and the predefined valuenone.	div { cue-after:url(sound.wav); }div { cue-after:none; }
cue-before	Declares an audio cue to play before an element.	URL values and the predefined valuenone.	div { cue-before:url(sound.wav); }div { cue-before:none; }
cue	Shorthand proerty to set both cue values at once.	URL values and the predefined valuenone. Separate the values by a space in the following order: cue-before cue-after If only one cue value is declared, it is used for both before and after.	div { cue:url(sound.wav) url(sound2.wav); }div { cue:url(sound.wav); }
elevation	Declares the elevation of a sound.	Angle values in degrees (deg), or one of the following predefined values: below level above higher lower	div { elevation:30deg; }div { elevation:higher; }
pause-after	Declares the amount of time to pause after an element.	Time in milliseconds (ms) or percentages.	div { pause-after:100ms; }div { pause-after:20%; }
pause-before	Declares the amount of time to pause before an element.	Time in milliseconds (ms) or percentages.	div { pause-before:100ms; }div { pause-before:20%; }
pause	Shorthand proerty to set both pause values at once.	Separate the values by a space in the following order: pause-before pause-after If only one pause value is declared, it is used for both before and after.	div { pause:200ms 100ms; }div { pause:100ms; }
pitch	Declares the average speaking pitch of a voice.	Frequencies in hertz (Hz) or the following predefined values: x-low low medium high x-high	div { pitch:120Hz; }div { pitch:high; }
pitch-range	Declares a change in the pitch range of a voice.	Number values between 0 and 100 (lower values indicate a flat voice while higher values indicate an animated voice).	div { pitch-range:50; }div { pitch-range:99; }
play-during	Declares a background sound to be played while the current element is spoken.	URL value, followed by one or more of the following keywords, separated by spaces: mix repeat Alternatley, one of the following keywords: auto none	div { play-during:url(music.wav); }div { play-during:url(music.wav) repeat; } div { play-during:none; }
richness	Declares the richness of the voice in spoken text.	Numeric values between 0 and 100 (lower values have less richness and higher values have more richness).	div { richness:50; }div { richness:0; }
speak	Declares if/how text is spoken.	normal none spell-out	div { speak:none; }div { speak:spell-out; }
speak-header	Declares how often table header cells are spoken.	once always	th { speak-header:once; }th { speak-header:always; }
speak-numeral	Declares how numerals are spoken.	digits continuous	div { speak-numeral:digits; }div { speak-numeral:continuous; }
speak-punctuation	Declares how punctuation is spoken.	code none	div { speak-punctuation:code; }div { speak-punctuation:none; }
speech-rate	Declares the speech rate of spoken text.	A number indicating the number of words per minute, or one of the following predefined values: x-slow slow medium fast x-fast faster slower	div { speech-rate:50; }div { speech-rate:medium; }
stress	Declares the stress of the voice on spoken text.	Numeric values between 0 and 100 (lower values have less stress and higher values have more stress).	div { stress:50; }div { stress:0; }
voice-family	Declares the voice family of spoken text.	Generic or specific voice family names.	More Information
volume	Declares the median volume.	Numbers between 0 and 100, percentages, or one of the following predefined values: silent x-soft soft medium loud x-loud	div { volume:50; }div { volume:silent; }