 | Cascading Style Sheets: The Definitive Guide |  |
Tuesday 07th of February 2012 04:10:45 AM
This appendix lists all CSS1 properties, plus the CSS1 pseudo-elements and pseudo-classes. The values to the right of a property name show the browser compatibility information for that property. They will look something like this:
IE4 Y/N IE5 Y/Y NN4 N/N Op3 Y/-
The browsers listed are:
Netscape Navigator 4
Internet Explorer 4 (IE4.5 for Macintosh)
Internet Explorer 5
Opera 3.6
The first value in each pair is for the Windows version; the second value is for the Macintosh version. (Sorry, Macintosh folks, but we are in the minority.) For instance, IE4 Y/N means that the property is supported in IE4 for Windows, but not IE4 for Macintosh. The possible support values are:
Supported
Not Supported
Partial Support (may mean that some values are supported and others are not)
Quirky Support (close to the letter of the specification)
Buggy Support (may mangle display, or even crash the browser)
Not Applicable (browser doesn't exist)
For more detailed information about browser support, including notes on the support ratings, see Appendix D, "CSS Support Chart".
element to element, and at each level the factor is used as amultiplier of the font-size of each element.Therefore, the following markup would be displayed as shown in Figure 8-64 (backgrounds added for illustrative purposes):P {font-size: 12px; line-height: 1.5;}SMALL {font-size: 66%;}BIG {font-size: 200%;}<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL> also haveline-heights 1.5 time their font-size... and that includes <BIG>this big
:active IE4 Y/Y IE5 Y/Y NN4 N/N Op3 N/-
This
pseudo-class applies to hyperlinks,
but not named anchors. It sets the styles to be used at the moment a
hyperlink is being selected (e.g., clicked).
Example
A:active {color: red; background: yellow;}
Values
n/a
Default
n/a
Inherited
yes
Applies to
anchor elements with an HREF attribute
:first-letter IE4 N/N IE5 N/Y NN4 N/N Op3 Y/-
Applies styles to the first
letter of an element. This pseudo-class can be used to generate
drop-cap effects, among other things.
Example
P:first-letter {color: purple;}
<P>The capital 'T' at the beginning of this paragraph is purple.</P>
Values
n/a
Default
n/a
Inherited
yes
Applies to
block
:first-line IE4 N/N IE5 N/Y NN4 N/N Op3 Y/-
Applies styles to the first line
of an element. The styles are applied even if the window is resized;
the text is simply restyled to encompass only the first line of the
element.
Example
P:first-line {color: red;}
<P>The first line of this paragraph is red. blah blah blah...</P>
Values
n/a
Default
n/a
Inherited
yes
Applies to
block
!important IE4 Y/N IE5 Y/Y NN4 N/N Op3 Y/-
Style declaration is made important,
thereby raising its weight in the cascade. Important declarations
override all others. In CSS1, important author styles override all
reader styles, even important ones. In CSS2, this is reversed, so
that important reader styles always win out over the author's
styles, important or otherwise.
Example
H1 {color: maroon !important;}
P.warning {color: rgb(100%,20%,20%) !important; font-weight: bold;}
Values
n/a
Default
n/a
Inherited
yes
Applies to
style rules
:link IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-
This pseudo-class applies to
hyperlinks, but not named anchors. It sets the styles to be used for
a hyperlink that points to a URI that has not yet been visited (i.e.,
is not listed in the browser's history).
Example
A:link {color: blue;}
Values
n/a
Default
n/a
Inherited
yes
Applies to
anchor elements with an HREF attribute
:visited IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
This pseudo-class applies to
hyperlinks, but not named anchors. It sets the styles to be used for
a hyperlink that points to a URI that has already been visited (i.e.,
is listed in the browser's history).
Example
A:visited {color: navy;}
Values
n/a
Default
n/a
Inherited
yes
Applies to
anchor elements with an HREF attribute
background IE4 P/Y IE5 Y/Y NN4 P/P Op3 P/-
A
shorthand way of expressing the various background properties using a
single rule. Use of this property is encouraged over the other
background properties because it is more widely supported and
doesn't take as long to type.
Example
BODY {background: white url(bg41.gif) fixed center repeat-x;}
P {background: #555 url(http://www.pix.org/stone.png);}
PRE {background: yellow;}
Values
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Default
refer to individual properties
Inherited
no
Applies to
all elements
Percentage values allowed on <background-position>.
background-attachment IE4 Y/Y IE5 Y/Y NN4 N/N Op3 N/-
This
property defines whether or not the background image scrolls along
with the element. This is generally applied to
BODY only, and in fact is largely supported only
for that element. It is theoretically possible to create
"aligned" backgrounds in multiple elements using this
property; see Chapter 6, "Colors and Backgrounds", for more details.
Example
BODY {background-attachment: scroll;}
DIV.fixbg {background-attachment: fixed;}
Values
scroll | fixed
Default
scroll
Inherited
no
Applies to
all elements
background-color IE4 Y/Y IE5 Y/Y NN4 B/B Op3 Y/-
This sets
the background color of an element. The color fills the content area
and padding, and extends out to the outer edge of the element's
border. The value transparent trips across a nasty
bug in Navigator 4.x, which interprets it as
black.
Example
H4 {background-color: white;}
P {background-color: rgb(50%,50%,50%);}
PRE {background-color: #FFFF99;}
Values
<color> | transparent
Default
transparent
Inherited
no
Applies to
all elements
background-image IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-
Sets an
image to be the background pattern. Depending on the value of
background-repeat, the background image may tile
indefinitely, or only along one axis, or not at all, and the starting
position of the tiling is dependent on the value of
background-position.
Example
BODY {background-image: url(bg41.gif);}
H2 {background-image: url(http://www.pix.org/dots.png);}
Values
<url> | none
Default
none
Inherited
no
Applies to
all elements
background-position IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
This sets
the starting position of a background image (defined by the value of
background-image).
background-position is used to set the origin of
the background's tiling, or its position if there is no tiling.
Percentage values define not only a point within the element, but
also the same point in the origin image itself; see Chapter 6, "Colors and Backgrounds" for more details.
Example
BODY {background-position: top center;}
Values
[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Default
0% 0%
Inherited
no
Applies to
block-level and replaced
Percentage values refer to the size of the element itself as well as
the size of the origin image.
background-repeat IE4 P/Y IE5 Y/Y NN4 P/B Op3 Y/-
Sets the
repeat style for a background image. Note that the axis-related
repeats actually repeat in both directions along
the specified axis. The repeating of a background image begins with
the origin image, whose position is defined by the value of
background-position.
Example
BODY {background-repeat: no-repeat;}
Values
repeat | repeat-x |
repeat-y | no-repeat
Default
repeat
Inherited
no
Applies to
all elements
border IE4 P/P IE5 P/Y NN4 P/P Op3 P/-
This is a
shorthand property that defines the width, color, and style of the
border of an element. Note that while none of the values are
required, omitting the <border-style> value
will result in no border being applied, since the default of
border-style is none.
Example
H1 {border: 2px dashed maroon;}
Values
<border-width> || <border-style> || <color>
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
border-bottom IE4 P/P IE5 P/Y NN4 N/N Op3 P/-
This shorthand property defines the
width, color, and style of the bottom border of an element. The same
caveats about border-style apply.
Example
UL {border-bottom: 0.5in inset green;}
Values
<border-bottom> || <border-style> || <color>
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
border-bottom-width IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
Sets the
width of the bottom border of an element, which will inherit the
element's background, and may have a foreground of its own (see
border-style). Negative length values are not
permitted.
Example
UL {border-bottom-width: 0.5in;}
Values
thin | medium |
thick | <length>
Default
medium
Inherited
no
Applies to
all elements
border-color IE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-
Sets the color of the foreground of the
overall border of an element (see border-style).
Example
H1 {border-color: purple; border-style: solid;}
Values
<color>{1,4}
Default
the value of color for the element itself
Inherited
no
Applies to
all elements
border-left IE4 P/P IE5 P/Y NN4 N/N Op3 P/-
This shorthand property defines the
width, color, and style of the left border of an element. The usual
caveats about border-style apply.
Example
P {border-left: 3em solid gray;}
Values
<border-left> || <border-style> || <color>
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
border-left-width IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
Sets the
width of the left border of an element, which will inherit the
element's background, and may have a foreground of its own (see
border-style). Negative length values are not
permitted.
Example
P {border-left-width: 3em;}
Values
thin | medium |
thick | <length>
Default
medium
Inherited
no
Applies to
all elements
border-right IE4 P/P IE5 P/Y NN4 N/N Op3 P/-
This shorthand property defines the
width, color, and style of the right border of an element. The usual
caveats about border-style apply.
Example
IMG {border-right: 30px dotted blue;}
Values
<border-right> || <border-style> || <color>
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
border-right-width IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
Sets the
width of the right border of an element, which will inherit the
element's background, and may have a foreground of its own (see
border-style). Negative length values are not
permitted.
Example
IMG {border-right-width: 30px;}
Values
thin | medium |
thick | <length>
Default
medium
Inherited
no
Applies to
all elements
border-style IE4 P/Y IE5 P/Y NN4 P/P Op3 Y/-
Sets the style of the overall border of
an element, using the color set by border-color or the foreground of
the element itself if no border-color has been defined. CSS1 does not
require recognition of any values besides none and
solid. Any unrecognized value from the list of
values should be reinterpreted as solid.
Example
H1 {border-style: solid; border-color: purple;}
Values
none | dotted | dashed | solid | double | groove | ridge | inset | outset
Default
none
Inherited
no
Applies to
all elements
border-top IE4 P/P IE5 P/Y NN4 N/N Op3 P/-
This shorthand property defines the
width, color, and style of the top border of an element. The usual
caveats about border-style apply.
Example
UL {border-top: 0.5in solid black;}
Values
<border-top> || <border-style> || <color>
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
border-top-width IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
Sets the
width of the top border of an element, which will inherit the
element's background, and may have a foreground of its own (see
border-style). Negative length values are not
permitted.
Example
UL {border-top-width: 0.5in;}
Values
thin | medium |
thick | <length>
Default
medium
Inherited
no
Applies to
all elements
border-width IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
Sets the width of the overall border of
an element, which will inherit the element's background, and
may have a foreground of its own (see
border-style). Negative length values are not
permitted.
Example
H1 {border-width: 2ex;}
Values
[ thin | medium |
thick | <length> ]{1,4}
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
clear IE4 P/Y IE5 P/Y NN4 P/P Op3 B/-
Defines the
sides of an element on which no floating images may be placed. The
effect of this is to move the element downward until the top of its
border-edge is below the bottom edge of the floated element.
Example
H1 {clear: right;}
Values
none | left |
right | both
Default
none
Inherited
no
Applies to
all elements
color IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-
Sets the
foreground color of a given element. For text, this sets the text
color. The value of color is inherited by any borders of an element,
unless they have had a color set border-color.
Example
STRONG {color: rgb(255,128,128);}
Values
<color>
Default
UA specific
Inherited
yes
Applies to
all elements
display IE4 P/P IE5 P/Y NN4 P/P Op3 P/-
Used to
classify elements into broad categories. The most popular value is
probably none, which suppresses the display of an
element altogether. Gratuitous use of display with
a document type such as HTML can be dangerous, since HTML already has
a display hierarchy defined. However, in the case
of XML, which has no such hierarchy, display is indispensable.
In CSS2, the range of values for display is dramatically expanded.
See Chapter 10, "CSS2: A Look Ahead", for more details.
Example
.hide {display: none;}
Values
block | inline |
list-item | none
Default
block
Inherited
no
Applies to
all elements
float IE4 P/B IE5 P/Q NN4 P/P Op3 B/-
Sets the
float direction for an element. This is generally applied to images
in order to allow text to flow around them, but under CSS1 any
element may be floated. Note that, for elements such as paragraph,
floating the element will cause its width to tend toward zero unless
an explicit width is assigned; thus, width assignment is a crucial
part of floating any nonreplaced element.
Example
IMG {float: left;}
Values
left | right |
none
Default
none
Inherited
no
Applies to
all elements
font IE4 P/Q IE5 P/Y NN4 P/P Op3 Y/-
This is a
shorthand property for the other font properties. Any of these values
may be omitted except for font-size and
font-family, which are always required for a valid
font declaration. Note the following incorrect examples.
Example
P {font: bold 12pt/14pt Helvetica,sans-serif;}
P.wrong {font: bold Helvetica,sans-serif;} /* missing a font-size */
P.wrong {font: 12pt Times,serif bold;} /* font-weight must come before others */
P.wrong {font: 12pt italic Times;} /* font-style must come before font-size */
P.fancy {font: 14pt Author;} /* technically correct, although generic font-families are encouraged for fallback purposes */
Values
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ] ? <font-family>
Default
refer to individual properties
Inherited
yes
Applies to
all elements
font-family IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-
This is used to declare a specific font
to be used, or a generic font family, or both. Note that the use of a
specific font family is dependent on the user having said font
installed on the system. Thus the use of generic font families is
strongly encouraged, since this will cause the user agent to attempt
to substitute a similar font.
Example
P {font-family: Helvetica,sans-serif;}
Values
[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Default
UA specific
Inherited
yes
Applies to
all elements
font-size IE4 P/Q IE5 P/Y NN4 Y/Y Op3 Y/-
This sets the size of the font. This
can be defined as an absolute size, a relative size, a length value,
or a percentage value. Negative length and percentage values are not
permitted. The dangers of font-size assignment are many and varied.
Some of these dangers are covered in Chapter 4, "Text Properties".
Example
H2 {font-size: 200%;}
H3 {font-size: 36pt;}
Values
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>
Default
medium
Inherited
yes
Applies to
all elements
Percentage values are relative to the parent element's font
size.
font-style IE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-
This set the font to use either italic,
oblique, or normal text. Italic text is generally a defined font face
within the font itself, whereas oblique text is less often so. In the
latter case, the user agent can compute a slanted font face.
Example
EM {font-style: oblique;}
Values
normal | italic |
oblique
Default
normal
Inherited
yes
Applies to
all elements
font-variant IE4 Q/Y IE5 Q/Y NN4 N/N Op3 Y/-
This property currently has two values:
small-caps and normal. The
small-caps variant can either be applied as a face
of the selected font or computed by the user agent.
Example
H3 {font-variant: small-caps;}
Values
normal | small-caps
Default
normal
Inherited
yes
Applies to
all elements
font-weight IE4 Y/Y IE5 Y/Y NN4 P/P Op3 Y/-
This is used to set the weight of a
font, making it heavier or lighter. The numeric value 400 is
equivalent to the value normal, and 700 is equal
to bold. Each numeric value is at least as heavy
as the next-lower value, and at least as light as the next-higher
number.
Example
B {font-weight: 700;}
Values
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Default
normal
Inherited
yes
Applies to
all elements
height IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
This is used
to set the height of an element. Height is most often applied to
images, but can be used on any block-level or replaced element,
although support for such behavior is not widespread as of this
writing. Negative length values are not permitted.
Example
IMG.icon {height: 50px;}
Values
<length> | auto
Default
auto
Inherited
no
Applies to
block-level and replaced
letter-spacing IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
Used to set the amount of whitespace
between letters. A letter is defined as any displayed character,
including numbers, symbols, and other font glyphs. Length values are
used to define a modifier to the usual spacing, not the entire space
itself; thus, normal is synonymous with
0 (zero). Negative values are permitted, and cause
the letters to bunch closer together.
Example
P {letter-spacing: 0.5em;}
Values
normal | <length>
Default
normal
Inherited
yes
Applies to
all elements
line-height IE4 P/P IE5 P/Y NN4 P/P Op3 Q/-
This influences the layout of line
boxes. The difference between the value of
line-height and the value of
font-size is called leading, and half of the
leading (otherwise known as half-leading) is applied above and below
the content of an element or line of text. Negative values are not
permitted. Using a number defines a scaling factor that is multiplied
by the font-size, and the number itself is inherited, not the
computed value. This allows for much more intelligent page layout,
and is strongly preferred over other methods of setting
line-height.
The drawback to using a number value is that IE3 will interpret
it as a number of pixels. See Chapter 8, "Visual Formatting" for a
detailed discussion of line-height and line boxes.
Example
P {line-height: 18pt;}
H2 {line-height: 200%;}
Values
normal | <number> | <length> |
<percentage>
Default
normal
Inherited
yes
Applies to
all elements
Percentage values relative to the font size of the element itself
list-style IE4 P/P IE5 Y/Y NN4 P/P Op3 Y/-
A shorthand property condensing all
other list-style properties. It applies to all
elements with a display value of list-item ; in
ordinary HTML, this is any <LI> element.
Example
UL {list-style: square url(bullet3.gif) outer;} /* values are inherited by LI elements */
Values
[disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Default
not defined for shorthand properties
Inherited
yes
Applies to
elements with display of list-item
list-style-image IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
Used to
declare an image which is to be used as the "bullet" in
an unordered or ordered list. This style applies to elements with a
display value of list-item
(e.g., <LI> elements). The position of the
image with respect to the content of the list item is defined using
list-style-position.
Example
UL {list-style-image: url(bullet3.gif);}
Values
<url> | none
Default
none
Inherited
yes
Applies to
elements with display of list-item
list-style-position IE4 Y/Y IE5 Y/Y NN4 N/N Op3 Y/-
This
property is used to declare the position of the bullet or number in
an unordered or ordered list with respect to the content of the list
item. Applies to elements with a display value of
list-item. If the bullet is set to be
outside, then it is placed in the margin of the
list-item element. The exact behavior in this circumstance is not
defined in CSS.
Example
LI {list-style-position: outer;}
Values
inside | outside
Default
outside
Inherited
yes
Applies to
elements with display of list-item
list-style-type IE4 Y/Y IE5 Y/Y NN4 Y/P Op3 Y/-
This is used to declare the type of
bullet numbering system to be used in either an unordered or ordered
list, depending on the value specified. This property applies to
elements with a display value of
list-item.
Example
UL {list-style-type: square;}
OL {list-style-type: lower-roman;}
Values
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Default
disc
Inherited
yes
Applies to
elements with display of list-item
margin IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This sets
the size of the overall margin of an element. Vertically adjacent
margins of block-level elements are collapsed to be as large as the
largest margin, whereas inline elements effectively do not take
margins (they are allowed, but have no effect on page layout). Only
the left and right margins of inline elements have any effect, and
are not collapsed. Margins set on floated elements are not collapsed
with other margins under any circumstance. Negative values are
permitted, but caution is recommended.
Example
H1 {margin: 2ex;}
Values
[ <length> | <percentage> | auto ]{1,4}
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
Percentage values refer to width of the closest block-level ancestor.
margin-bottom IE4 P/P IE5 P/Y NN4 N/N Op3 Y/-
This sets the size of the bottom margin
of an element. Negative values are permitted, but caution is
recommended.
Example
UL {margin-bottom: 0.5in;}
Values
<length> | <percentage> | auto
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of the closest block-level
ancestor.
margin-left IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This sets the size of the left margin
of an element. Negative values are permitted, but caution is
recommended.
Example
P {margin-left: 3em;}
Values
<length> | <percentage> | auto
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to width of the closest block-level ancestor.
margin-right IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This sets the size of the right margin
of an element. Negative values are permitted, but caution is
recommended.
Example
IMG {margin-right: 30px;}
Values
<length> | <percentage> | auto
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to width of the closest block-level ancestor.
margin-top IE4 P/P IE5 P/Y NN4 P/P Op3 Y/-
This sets the size of the top margin of
an element. Negative values are permitted, but caution is
recommended.
Example
UL {margin-top: 0.5in;}
Values
<length> | <percentage> | auto
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of the closest block-level
ancestor.
padding IE4 P/P IE5 P/Y NN4 B/B Op3 B/-
This sets
the size of the overall padding of an element. The padding will
"inherit" the element's background; in other words,
the background of an element fills its content area and padding.
Padding set on inline elements does not affect line-height
calculations, but will be applied to the right and left ends of the
element. If an inline element has both padding and a background, the
background may be extended above and below the edges of the line-box
in which the inline element appears, but user agents are not required
to support this behavior. There is also no defined behavior to say
whether the foreground content of a previous line appears above the
background of a succeeding line, or is overwritten by that
background. Negative values are not permitted.
Example
H1 {padding: 2ex;}
Values
[ <length> | <percentage> ]{1,4}
Default
not defined for shorthand properties
Inherited
no
Applies to
all elements
Percentage values refer to the width of closest block-level ancestor.
padding-bottom IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This property sets the size of the
bottom padding of an element, and this padding will
"inherit" the element's background. Negative values
are not permitted.
Example
UL {padding-bottom: 0.5in;}
Values
<length> | <percentage>
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of closest block-level ancestor.
padding-left IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This property sets the size of the left
padding of an element, and this padding will "inherit"
the element's background. Negative values are not permitted.
Example
P {padding-left: 3em;}
Values
<length> | <percentage>
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of closest block-level ancestor.
padding-right IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This property sets the size of the
right padding of an element, and this padding will
"inherit" the element's background. Negative values
are not permitted.
Example
IMG {padding-right: 30px;}
Values
<length> | <percentage>
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of closest block-level ancestor.
padding-top IE4 P/P IE5 P/Y NN4 B/B Op3 Y/-
This property sets the size of the top
padding of an element, and this padding will "inherit"
the element's background. Negative values are not permitted.
Example
UL {padding-top: 0.5in;}
Values
<length> | <percentage>
Default
0
Inherited
no
Applies to
all elements
Percentage values refer to the width of the closest block-level
ancestor.
text-align IE4 Y/P IE5 Y/Y NN4 Y/P Op3 Y/-
This sets the horizontal alignment of
the text in an element, or more precisely, defines to which side of
the element the line-boxes are aligned. The value
justify is supported by programmatically adjusting
the letter- and word-spacing of the line's content, and results
may vary by user agent.
Example
P {text-align: justify;}
H4 {text-align: center;}
Values
left | right |
center | justify
Default
UA specific
Inherited
yes
Applies to
block
text-decoration IE4 P/P IE5 P/P NN4 Q/Q Op3 P/-
This property sets certain effects on
the text, such as underline and
blink. These decorations will "span"
child elements that do not have text decoration defined; see Chapter 4, "Text Properties" for more details. Combinations of the values
are legal.
User agents are not required to support the value
blink, and in fact only Netscape Navigator 4.x
does so.
Example
U {text-decoration: underline;}
.old {text-decoration: line-through;}
U.old {text-decoration: line-through underline;}
Values
none | [ underline ||
overline || line-through
|| blink ]
Default
none
Inherited
no
Applies to
all elements
text-indent IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-
Used to set the indentation of the
first line of an element. This is most often used to create a tab
effect for Negative values are permitted, and cause "hanging
indents."
Example
P {text-indent: 5em;}
H2 {text-indent: -25px;}
Values
<length> | <percentage>
Default
0
Inherited
yes
Applies to
block
Percentage values refer to parent element's width.
text-transform IE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 P/-
This property changes the case of the
letters in the element, regardless of the case of the original text.
The selection of letters to be capitalized by the value
capitalize is not a precisely defined behavior,
depending as it does on "words," which are difficult to
define in a programmatic way.
Example
H1 {text-transform: uppercase;}
.title {text-transform: capitalize;}
Values
capitalize | uppercase |
lowercase | none
Default
none
Inherited
yes
Applies to
all elements
vertical-align IE4 P/P IE5 P/Y NN4 N/N Op3 P/-
Used to set the vertical alignment of
an element's baseline with respect to its line-height. Negative
percentage values are permitted, and will cause the element to be
lowered, not raised.
Example
SUP {vertical-align: super;}
.fnote {vertical-align: 50%;}
Values
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Default
baseline
Inherited
no
Applies to
inline
Percentage values refer to the line height of the element itself.
white-space IE4 N/N IE5 N/Y NN4 P/P Op3 N/-
This property defines how whitespace
within the element is treated. normal acts like
traditional web browsers, in that it reduces any sequence of
whitespace to a single space. pre causes
whitespace to be treated as it is in the HTML element
PRE, with whitespace and returns preserved.
nowrap prevents an element from line breaking.
Example
TD {white-space: nowrap;}
TT {white-space: pre;}
Values
normal | pre |
nowrap
Default
normal
Inherited
yes
Applies to
block
width IE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-
Used to set
the width of an element. This is most often applied to images, but
can be used on any block-level or replaced element. Negative values
are not permitted.
Example
TABLE {width: 80%;}
Values
<length> | <percentage> | auto
Default
auto
Inherited
no
Applies to
block-level and replaced
Percentage values refer to the parent element's width.
word-spacing IE4 N/Y IE5 N/Y NN4 N/N Op3 Y/-
Used to set the amount of whitespace
between words. A "word" is defined as a string of
characters surrounded by whitespace. Length values are used to define
a modifier to the usual spacing, not the entire space itself; thus,
normal is synonymous with 0
(zero). Negative values are permitted, and cause the words to bunch
closer together.
Example
P {word-spacing: 0.5em;}
Values
normal | <length>
Default
normal
Inherited
yes
Applies to
B. HTML 2.0 Style Sheet 
D. CSS Support Chart
Copyright © 2002 O'Reilly & Associates. All rights reserved.
P {font-style: normal;}
EM, I {font-style: italic;}
As we can see in Figure 5-25, these styles would
make paragraphs use an upright font, as usual, and cause the
EM and I elements to use an
italic font -- again, as usual.
Figure 5-25. Ordinary document behavior through CSS
On the other hand, you might decide that there should be a subtle
You could also set the foreground color of INPUT
elements, although as we can see in Figure 6-12,
this would have the effect of setting that color on all inputs, from
text to radio-button to checkbox inputs:
SELECT {color: rgb(33%,33%,33%);}
INPUT {color: gray;}
Figure 6-12. Changing form element foregrounds
Note in Figure 6-12 that the text color next to the
checkboxes is still black. This is because we've only assigned