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