Overview
At its heart, CSS is a style language for visual presentation. Although it does have sections devoted to
aural and paged media, the vast bulk of its properties and abilities lie in the visual realm. It is therefore
unsurprising that the bulk of this reference should be devoted to explaining the visual media properties.
It is important to note that some of the properties in this section apply not only to visual media. Some of
them are also used in the interactive medium, for example. Others, such as display and position,
are used in non-visual media, but can have different effects in those media. These differences will be
noted, and are also covered in the sections that address non-visual media.
It is important to note that in many circumstances “visual media” is just another term for “continuous
media,” which itself is a fancy way of saying “browser display.” This isn’t all the term “visual media”
means, but it is what most people care about. Thus, there is a difference between visual and paged
media, despite the fact that both are fundamentally dependent on vision to be comprehended. Paged
media are covered in Chapter 5. For a review of the fundamentals of visual layout, refer to Chapter 1.
Although every property accepts inherit as a value, it is not discussed in detail in the following
reference. The operation of inherit is discussed in Chapter 1, as it is the same for every property.
Reference
background
background is a shorthand element used to set background styles for an element.
Summary
Value Syntax
[
||
inherit
Initial Value
not defined for shorthand properties
Percentages
allowed on
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Sets a solid color for the element’s background, padding, and border background. See the section on
background-color for more details.
Cascading Style Sheets 2.0
36
Defines the location of an image to be placed in the element’s back- ground. See the section on
background-image for more details.
Sets a repeat direction for an image in the element’s background. See the section on backgroundrepeat
for more details.
Sets an attachment state for any images in the element’s background. See the section on
background-attachment for more details.
Sets a position for the origin image in the element’s background. See the section on backgroundposition
for more details.
Note Although all five background aspects can be set via background, only one of them
is necessary to constitute a legal value. Thus, it is possible to set just the
background color with background, thus returning the other four aspects to their
default values. (See the section on shorthand properties in Chapter 1 for more
details.)
In Navigator 4.x, background and its associated properties are not well supported. The most common
problem is that a background applied to a block-level element will only set a background for the content
of the element, not the entire background of the element. A workaround for this problem is to set an
invisibly thin border around the element whose color matches the background of the parent element.
Examples
body {background: white url(/pix/sawtooth.gif) top center
repeat-x scroll;}
table {background: silver;}
p.warning {background: yellow url(danger.jpg) repeat-y;}
Related Properties
background-attachment, background-color, background-image,
background-position, background-repeat
background-attachment
background-attachment determines the tiling context and scroll state of a background image.
Summary
Value Syntax
scroll | fixed | inherit
Initial Value
scroll
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
scroll
A background image set to scroll will scroll along with the rest of the document.
fixed
A background image set to fixed will remain locked in place while the rest of the document scrolls.
Cascading Style Sheets 2.0
37
Note Although it seems simple in concept, background-attachment is actually quite
powerful and in some ways very complicated.
If a background image is set to be fixed, it is locked in place and cannot move while the rest of the
document scrolls. One way to take advantage of this effect is to define a tiled pattern which is the same
size as a tiled pattern in the background, but a different color. For example, consider:
body {background: green url(greentile.gif) fixed;}
h1 {background: blue url(bluetile.gif) fixed;}
For this example, we’ll assume that the two background images are the same color. Since the tiling
context for both elements is the top left corner of the document, the tiled backgrounds will line up with
each other. As the H1 element scrolls around the screen, it will "look into" different parts of its own
background, which will always be lined up with the body’s background. Thus, it will appear to change
the color of the tiled background.
There is a potential danger with this property, however. Since fixed backgrounds are positioned with
respect to the viewport, they may be placed outside the background and padding of the element to
which they belong. In order to understand this, consider the following rule:
h2 {background: black url(star.jpg) center fixed no-repeat;}
Here we have a single image which will be centered in viewport, will not be tiled, and will not scroll with
the document. However, there is no guarantee that an H2 element will be placed at the center of the
viewport. In that case, the background image will not be visible, since it is placed outside the padding
and background of the H2. Only when an H2 is at the center of the viewport will the associated
background image be visible. In addition, if multiple rules place different background images in the
same position (the center of the document), they will overlap in some sense. However, since elements
do not generally overlap, this is not necessarily a problem. As each element scrolls past the center of
the viewport, it will reveal some or all of its associated background image.
However, only Navigator 6 and Internet Explorer 5 for Macintosh support this behavior. All other known
browsers support fixed backgrounds on the BODY element in HTML, but do not support the "alignment"
behavior described.
The specification allows user agents to treat fixed as scroll. This has the same effect as not
supporting background-attachment at all, since all known visual browsers implement the
background- scrolling behavior as part of their HTML handling.
Examples
body {background-attachment: fixed;}
h1 {background-attachment: scroll;}
Related Properties
background, background-color, background-image,
background-position, background-repeat
background-color
background-color sets a solid color for the entire background, including the padding and border
background, of an element.
Summary
Value Syntax
Initial Value
transparent
Percentages
n/a
Inherited
no
Applies to
all elements
Cascading Style Sheets 2.0
38
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details).
transparent
Allows the backgrounds of ancestor elements to “shine through,” or be visible behind this element.
Note Although the default value of transparent is honored by all known browsers,
explicitly setting a value of transparent in Navigator 4.x will result in a black
background. In a related bug, setting the value to inherit will result in a sickly
green.
Examples
body {background-color: white;}
h1 {background-color: rgb(100%,60%,33.33%);}
p.warning {background-color: #FF0;}
Related Properties
background, background-attachment, background-image,
background-position, background-repeat
background-image
background-image defines a pointer to an image resource which is to be placed in the background of
an element.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
The user agent should use the image defined by that URI as the background image. If the URI points to
something other than an image, then it is to be ignored and the user agent should act as though
background-image had been set to none.
none
Setting background-image to none means that no background image should be used for matching
elements.
Note By default, background images are tiled from the top left corner of the element
and will scroll with the document; however, all this can be changed via other
background properties. If an image cannot be found, or if portions of the image
are transparent, then the background color of the element “fills in” the blank parts.
Cascading Style Sheets 2.0
39
If the background color is transparent, then the backgrounds of any ancestor
elements will be visible through the blank parts. Background images with alpha
channels, such as those in the PNG format, should composite the image with the
color provided by background-color, and with the background of any ancestor
elements which are visible.
It is generally a good practice to make sure that a background color is set along with a background
image, especially if the foreground (text) color is meant to be complemented by the background color.
By providing a background color as a fallback, authors can do their best to ensure that the document
will be readable even if the back- ground image cannot be displayed for some reason.
Examples
body {background-image: url(http://www.images.net/cat1/newts.gif);}
table {background-image: url(wavy.jpg);}
pre {background-image: none;}
Related Properties
background, background-attachment, background-color,
background-position, background-repeat
background-position
background-position determines the placement of the origin element; that is, the point from which
a repeated background begins.
Summary
Value Syntax
[ [
[left | center | right] ] ] | inherit
Initial Value
0% 0%
Percentages
refer to the size of the box itself
Inherited
no
Applies to
block-level and replaced elements
Media Groups
visual
Values
percentage
Causes the appropriate point within the origin image to be aligned with the appropriate point in the
background of the element. The percentage values are used to calculate both points. If one percentage
value is given, it is used for both horizontal and vertical axes. If two values are given, the first is used for
the horizontal axis, and the second for the vertical. Thus, for a value of 50% 50%, the middle of the origin
image is aligned with the middle of the background; for a value of 100% 100%, the bottom right corner of
the origin image aligns with the bottom right corner of the element background. Percentage values may
not be mixed with keywords such as left, but may be mixed with length values.
Defines the offset of the top left corner of the origin image from the top left corner of the background. If
one length value is given, it is used for both horizontal and vertical axes. If two values are given, the first
is used for the horizontal axis, and the second for the vertical. Length values may be mixed with
percentage values, but not with keywords such as top.
top
Cascading Style Sheets 2.0
40
Causes the top edge of the origin image to be aligned with the top edge of the background. top may be
used in conjunction with the keywords left, center, and right. If it is used by itself, top is
equivalent to the value 50% 0%.
bottom
Causes the bottom edge of the origin image to be aligned with the bottom edge of the background.
bottom may be used in conjunction with the keywords left, center, and right. If it is used by itself,
bottom is equivalent to the value 50% 100%.
left
Causes the left edge of the origin image to be aligned with the left edge of the background. left may
be used in conjunction with the keywords top, center, and bottom. If it is used by itself, left is
equivalent to the value 0% 50%.
right
Causes the right edge of the origin image to be aligned with the right edge of the background. right
may be used in conjunction with the keywords top, center, and bottom. If it is used by itself, right
is equivalent to the value 100% 50%.
center
Causes the center of the origin image to be aligned with the center of at least one axis of the
background. center may be used in conjunction with any of the keywords. If it is used by itself,
center is equivalent to the value 50% 50% (and is also equivalent to center center).
Note The term origin image is a condensed way of saying “place from which the tiling
of the background image will commence.” By default, a background image is
repeated in all four directions—up, down, right, and left—infinitely. (See
background-repeat for information on how to alter this behavior.) Changing the
position of the origin image can change the way the background is laid out. For
example, a grid-pattern will look quite different if it tiles from the center of the
background, instead of from the top left corner. This difference will be seen
primarily around the edges of the element’s background, where the clipping of the
background will change depending on the origin image’s placement.
If a length unit and a percentage are used together, or if two length or two percentage values are
specified, then the first is used for the horizontal axis, and the second for the vertical. Length and
percentage values may be negative, and will push the origin image above and to the left of the top left
corner of the element’s box. However, there may be unexpected results, as user agents are not
required to support this behavior.
Keyword combinations may occur in any order, thanks to their inherent meanings. Thus, top left and
left top will have the same effect, and both are equivalent to the value 0% 0%.
Navigator 4.x does not support background-position at all.
Examples
body {background-position: top center;}
h1 {background-position: 50%;}
td.sidebar {background-position: -10px 33%;}
Related Properties
background, background-attachment, background-color, background-image,
background-repeat
background-repeat
background-repeat defines the directions in which a background image will be repeated (if any).
Summary
Value Syntax
repeat | repeat-x | repeat-y | no-repeat | inherit
Initial Value
repeat
Percentages
n/a
Cascading Style Sheets 2.0
41
Inherited
no
Applies to
all elements
Media Groups
visual
Values
repeat
Causes the background image to be repeated along both the horizontal and vertical axes. This is the
“tiling” effect familiar from traditional HTML browsers.
repeat-x
Causes the background image to be repeated along the x axis. Note that this means it will repeat to
both the right and left, not just to the right.
repeat-y
Causes the background image to be repeated along the y axis. Note that this means it will repeat to
both up and down, not just down.
no-repeat
Prevents the background image from being repeated at all. The origin image will be placed in the
background, but no “tiling” will occur.
Note The tiling effects of background-repeat are often misunderstood by authors. The
common assumption is that once the origin image has been placed via
background-position, the background will repeat down and to the right. Were this
true, then centering the origin image and setting background-repeat to repeat
would fill the background into the lower right quadrant of the background. Instead,
the background will fill the entire background, as an author would expect.
This allows authors to center an image and repeat it along one axis or another. Assume a sine-wave
pattern image which describes a single sine. This can be set as a background image, the origin image
moved to the center of the element’s background, and the repetition set to repeat-x. This will cause
the sine wave to stretch from one side of the background to the other, with the entire series of waves
centered within the element.
Internet Explorer 4 for Windows repeats backgrounds only down and to the right, not in both directions
along the axes.
Examples
body {background-image: url(sideteeth.png);
background-repeat: repeat-y;}
h1 {background-image: url(sinewave.gif);
background-repeat: repeat-x;}
table {background-repeat: repeat;}
Related Properties
background, background-attachment, background-color,
background-image, background-position
border
border is a shorthand property which sets the style, color, and width of the border around an element.
Summary
Value Syntax
[
Initial Value
Cascading Style Sheets 2.0
42
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). This sets the width for the border around the entire element. Length values for border widths
may not be negative.
Any permitted border style (see border-style for more details). This sets the style for the border
around the entire element.
Any color value (see the section on color units in Chapter 2 for more details). This sets the color for the
border around the entire element.
Note Since this property can only accept a single keyword for each aspect (style, color,
and width), use of border is generally restricted to those cases in which an author
wishes to set a consistent border all the way around an element. In addition,
since it is a shorthand property, its values can override those set by earlier rules;
see the section on shorthand properties in Chapter 1 for more details.
Examples
pre {border: thin solid purple;}
p.warning {border: 0.25em double red;}
a:link img {border: 2px solid blue;}
Related Properties
border-bottom, border-color, border-left, border-top, border-right,
border-style, border-width
border-bottom
border-bottom is a shorthand property which sets the style, color, and width of the bottom border of
an element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
43
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for border widths may not be negative.
Any permitted value for the property border-style.
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Note that if no border style is supplied, then the border will not exist (see borderstyle
for more details).
Examples
h1 {border-bottom: 0.25em double gray;}
a {border-bottom: 1px solid;}
pre {border-bottom: thin outset rgb(25%, 75%, 42.13%);}
Related Properties
border, border-bottom-color, border-bottom-style, border-bottom-width, color
border-bottom-color
border-bottom-color sets the color of the bottom border of an element.
Summary
Value Syntax
Initial Value
the value of the color property for the element
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Since this property sets the color for a single side of the border, it can only accept
one color value.
Examples
h2 {border-bottom-color: purple;}
table {border-bottom-color: #C0A467;}
Cascading Style Sheets 2.0
44
Related Properties
border, border-bottom, border-bottom-style,
border-bottom-width, border-color, color
border-bottom-style
border-bottom-style sets the style of the bottom border of an element.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any permitted value of the property border-style.
Note The default value of none will cause the border to have no existence, and
therefore no width (see border-style for more details).
Examples
h4 {border-bottom-style: inset;}
ol {border-bottom-style: none;}
Related Properties
border, border-bottom, border-bottom-color,
border-bottom-width, border-style
border-bottom-width
border-bottom-width sets the width of the bottom border of an element.
Summary
Value Syntax
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
Cascading Style Sheets 2.0
45
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for this property may not be negative.
Note The value provided for border-bottom-width will only have an effect if a border
style other than none has been set for the bottom border (see border-style for
more details). If the style of the bottom border is set to none, whether via borderbottom-
style, border-style, or border, then the width of the border is reset to 0.
Examples
p.footer (border-bottom-width: 1px;}
h1 {border-bottom-width: 0.125em;}
Related Properties
border, border-bottom, border-bottom-color,
border-bottom-style, border-width
border-collapse
border-collapse determines the border model used in the rendering of a table.
Summary
Value Syntax
collapse | separate | inherit
Initial Value
collapse
Percentages
n/a
Inherited
yes
Applies to
elements with a display of table or inline-table
Media Groups
visual
Values
collapse
Sets a table to use a collapsing-border method of layout. With this method, two adjacent cells will share
a border between them, with the border chosen depending on a number of rules.
1. Borders with a border-style of hidden will suppress any border at that location. Thus, setting
the first table cell in a row to border-style: groove and then setting the style of the
second cell in the row to border-left-style: hidden will eliminate the grooved border
the two cells might otherwise have shared. The visual effect will be the same as if the two
cells were merged into one cell, although the top and bottom borders of the first cell will not
extend to the second cell.
2. A border-style of none has the lowest priority, in terms of determining which border style
should be used for a given shared border. Thus, if two adjacent cells have styles of solid
and none, respectively, then the cell set to solid will have a solid border around its entire
perimeter.
3. Narrow borders are discarded in favor of wider borders. This rule is ignored if any of the
adjacent borders has a border-style of hidden, or if any of them is set to none.
Cascading Style Sheets 2.0
46
4. If adjacent borders have the same width, then the border-style to be used is chosen in
the order of preference double, solid, dashed, dotted, ridge, outset, groove, and
last, inset.
5. If adjacent borders are the same style and width, but different colors, then the border to be
used is chosen in the order of preference cell, row, row group, column, column group, and
last, table.
Although the process sounds quite convoluted, this method is in fact the same as that used by
traditional HTML browsers. Under this method, groups of cells (i.e., columns and rows) can have
borders. If the border-collapse: collapse is declared for a given table, then empty-cells and
border-spacing should be ignored within that table.
separate
Sets a table to use a separate-border method of layout. Under this method, every cell has its own
border, and none of these borders are shared with other cells in the table. The gaps between the cells
(if any) are set using the property border-spacing, and any blank space between cells is filled with
the table’s background. When using this method only cells may be assigned. If border-collapse:
separate is declared for a given table, then any border styles declared for rows, columns, and groups
of table elements within that table will be ignored. Furthermore, the rendering of empty cells is controlled
by the property empty-cells.
Note As of this writing, support for table rendering with CSS was almost non-existent.
Thus, browsers effectively supported border- collapse: collapse, which means
that border-spacing and empty-cells had no effect.
Examples
table.old-style {border-collapse: collapse;}
table.spacious {border-collapse: separate;}
Related Properties
border-spacing, empty-cells
border-color
border-color is a shorthand property used to set the color of all four border sides of an element.
Summary
Value Syntax
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details). If there are four color
values declared, they apply in the order: top, right, bottom, left. In the case of three color values, the first
will apply to the top border, the second to the left and right borders, and the third to the bottom border. If
two color values are declared, the first applies to the top and bottom borders, while the second applies
to the left and right borders. If one color value is declared, it applies to all four sides.
transparent
Cascading Style Sheets 2.0
47
Sets the border to be invisible. In this state, the border may still have width, but it will not be drawn. This
is similar to setting the property border-style to be hidden, except that in this case the element’s
border style is not affected. This keyword must be used alone, and will thus set all four border sides to
be invisible.
Note Some border styles may alter the color from what is declared. For example, the
inset and outset border styles use "highlight" and "shaded" variants of the
declared color to give the impression of the element being raised from (or
depressed into) the document.
Examples
h1 {border-color: #000000 gray;}
p.warning {border-color: rgb(255,0,0);}
div.circus {border-color: green red magenta yellow;}
Related Properties
border, border-bottom-color, border-left-color,
border-right-color, border-top-color, color
border-left
border-left is a shorthand property which sets the style, color, and width of the left border of an
element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for border widths may not be negative.
Any permitted value for the property border-style.
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Note that if no border style is supplied, then the border will not exist (see borderstyle
for more details).
Examples
h1 {border-left: 0.25em double gray;}
Cascading Style Sheets 2.0
48
a {border-left: 1px solid;}
pre {border-left: thin outset rgb(25%, 75%, 42.13%);}
Related Properties
border, border-left-color, border-left-style,
border-left-width, color
border-left-color
border-left-color sets the color of the left border of an element.
Summary
Value Syntax
Initial Value
the value of the color property for the element
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Since this property sets the color for a single side of the border, it can only accept
one color value.
Examples
h2 {border-left-color: purple;}
table {border-left-color: #C0A467;}
Related Properties
border, border-left, border-left-style,
border-left-width, border-color, color
border-left-style
border-left-style sets the style of the left border of an element.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
Cascading Style Sheets 2.0
49
no
Applies to
all elements
Media Groups
visual
Values
Any permitted value of the property border-style.
Note The default value of none will cause the border to have no existence, and
therefore no width (see border-style for more details).
Examples
h4 {border-left-style: inset;}
ol {border-left-style: none;}
Related Properties
border, border-left, border-left-color,
border-left-width, border-style
border-left-width
border-left-width sets the width of the left border of an element.
Summary
Value Syntax
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for this property may not be negative.
Note The value provided for border-left-width will only have an effect if a border style
other than none has been set for the left border (see border-style for more
details). If the style of the left border is set to none, whether via border-left-style,
border-style, or border, then the width of the border is reset to 0.
Examples
p.footer (border-left-width: 1px;}
h1 {border-left- width: 0.125em;}
Cascading Style Sheets 2.0
50
Related Properties
border, border-left, border-left-color,
border-left-style, border-width
border-right
border-right is a shorthand property which sets the style, color, and width of the right border of an
element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for border widths may not be negative.
Any permitted value for the property border-style.
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Note that if no border style is supplied, then the border will not exist (see borderstyle
for more details).
Examples
h1 {border-right: 0.25em double gray;}
a {border-right: 1px solid;}
pre {border-right: thin outset rgb(25%, 75%, 42.13%);}
Related Properties
border, border-right-color, border-right-style,
border-right-width, color
border-right-color
border-right-color sets the color of the right border of an element.
Summary
Value Syntax
Cascading Style Sheets 2.0
51
Initial Value
the value of the color property for the element
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Since this property sets the color for a single side of the border, it can only accept
one color value.
Examples
h2 {border-right-color: purple;}
table {border-right-color: #C0A467;}
Related Properties
border, border-right, border-right-style,
border-right-width, border-color, color
border-right-style
border-right-style sets the style of the right border of an element.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any permitted value of the property border-style.
Note The default value of none will cause the border to have no existence, and
therefore no width (see border-style for more details).
Cascading Style Sheets 2.0
52
Examples
h4 {border-right-style: inset;}
ol {border-right-style: none;}
Related Properties
border, border-right, border-right-color,
border-right-width, border-style
border-right-width
border-right-width sets the width of the right border of an element.
Summary
Value Syntax
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for this property may not be negative.
Note The value provided for border-right-width will only have an effect if a border style
other than none has been set for the right border (see border-style for more
details). If the style of the right border is set to none, whether via border-rightstyle,
border-style, or border, then the width of the border is reset to 0.
Examples
p.footer (border-right-width: 1px;}
h1 {border-right-width: 0.125em;}
Related Properties
border, border-right, border-right-color,
border-right-style, border-width
border-spacing
border-spacing sets the distance between cells in a table, assuming that the table is rendered using
the separate-borders model.
Summary
Value Syntax
Initial Value
0
Cascading Style Sheets 2.0
53
Percentages
n/a
Inherited
yes
Applies to
elements with a display of table or inline-table
Media Groups
visual
Values
Any length unit. If two values are declared, the first applies to spacing along the horizontal axis, and the
second applies to the vertical axis. If one value is declared, it applies to both axes. Length values for
this property may not be negative.
Note If the property border-collapse is set to collapse (its default value), any value
declared for border-spacing will be ignored.
Examples
table {border-collapse: separate; border-spacing: 1px;}
table.widen {border-collapse: separate; border-spacing: 0.5in;}
Related Properties
border-collapse, empty-cells
border-style
border-style is a shorthand property used to set the styles of the four border sides of an element.
Summary
Value Syntax
[ none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset ]{1,4} | inherit
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
none
No border is drawn. The primary side effect of this value is that the computed border-width for the
border in question will be set to 0.
hidden
Equivalent to none, except in the context of tables which are rendered with the collapsed-border model
(see border-collapse for more details). This value cannot be used in conjunction with outlines (see
outline-style for more details).
Cascading Style Sheets 2.0
54
dotted
The border is drawn as a series of dots. The specific placement of these dots is left to the user agent.
dashed
The border is drawn as a series of short line segments. The specific placement of these lines is left to
the user agent.
solid
The border is drawn as a single unbroken line.
double
The border is drawn as a pair of unbroken lines. The specific place- ment of these lines, including the
separation between them, is left to the user agent.
groove
The border is drawn as though it were a furrow carved into the surface of the document. This implies a
“shading” of the border, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each border into two adjacent lines, and darkening the upper (or
leftward) half while lightening the lower (or rightward) half of each border.
ridge
The border is drawn as though it were a ridge pushing up the surface of the document. This implies a
“shading” of the border, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each border into two adjacent lines, and lightening the upper (or
leftward) half while darkening the lower (or rightward) half of each border.
inset
The border is drawn as though the entire element is pushing the surface of the document away from the
user. This implies a “shading” of the border, but the CSS specification does not describe this in detail.
Most user agents handle this shading by lightening the bottom and right borders while darkening the top
and left borders.
outset
The border is drawn as though the entire element is pushing the surface of the document toward the
user. This implies a “shading” of the border, but the CSS specification does not describe this in detail.
Most user agents handle this shading by darkening the bottom and right borders while lightening the top
and left borders.
Note If there are four style values declared, they apply in the order: top, right, bottom,
left. In the case of three style values, the first will apply to the top border, the
second to the left and right borders, and the third to the bottom border. If two style
values are declared, the first applies to the top and bottom borders, while the
second applies to the left and right borders. If one style value is declared, it
applies to all four sides.
In the case of those border styles which have gaps (dotted, dashed, and double), the background of
the element should be visible through the gaps. In other words, the border is always drawn on top of the
element’s background, which ends at the outer edge of the border.
In the case of those border styles which require shading (groove, ridge, inset, and outset), the
actual shaded colors used are based on the value of border-color for that border. It may also be
altered by any background which is visible behind the border, although, as of this writing, this behavior
has not been implemented.
User agents are permitted to interpret dotted, dashed, double, groove, ridge, inset, and
outset as solid. Navigator 4.x does just that.
The keywords permitted for this property collectively make up the
Examples
h3 {border-style: ridge none;}
pre {border-style: inset;}
div.crazy {border-style: double dotted outset solid;}
img {border-style: outset;}
Cascading Style Sheets 2.0
55
Related Properties
border, border-bottom-style, border-left-style,
border-right-style, border-top-style
border-top
border-top is a shorthand property which sets the style, color, and width of the top border of an
element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for border widths may not be negative.
Any permitted value for the property border-style.
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Note that if no border style is supplied, then the border will not exist (see borderstyle
for more details).
Examples
h1 {border-top: 0.25em double gray;}
a {border-top: 1px solid;}
pre {border-top: thin outset rgb(25%, 75%, 42.13%);}
Related Properties
border, border-top-color, border-top-style,
border-top-width, color
border-top-color
border-top-color sets the color of the top border of an element.
Summary
Value Syntax
Cascading Style Sheets 2.0
56
Initial Value
the value of the color property for the element
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any color value (see the section on color units in Chapter 2 for more details). If no color is specified by
this property or another border property, then the foreground color of the element is used for the
border’s color.
Note Since this property sets the color for a single side of the border, it can only accept
one color value.
Examples
h2 {border-top-color: purple;}
table {border-top-color: #C0A467;}
Related Properties
border, border-top, border-top-style,
border-top-width, border-color, color
border-top-style
border-top-style sets the style of the top border of an element.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any permitted value of the property border-style.
Note The default value of none will cause the border to have no existence, and
therefore no width (see border-style for more details).
Cascading Style Sheets 2.0
57
Examples
h4 {border-top-style: inset;}
ol {border-top-style: none;}
Related Properties
border, border-top, border-top-color,
border-top-width, border-style
border-top-width
border-top-width sets the width of the top border of an element.
Summary
Value Syntax
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value, or one of the keywords thin, medium, and thick (see border-width for more
details). Length values for this property may not be negative.
Note The value provided for border-top-width will only have an effect if a border style
other than none has been set for the top border (see border-style for more
details). If the style of the top border is set to none, whether via border-top-style,
border-style, or border, then the width of the order is reset to 0.
Examples
p.footer (border-top-width: 1px;}
h1 {border-top-width: 0.125em;}
Related Properties
border, border-top, border-top-color,
border-top-style, border-width
border-width
border-width is a shorthand property used to set the width of the four border sides of an element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
Cascading Style Sheets 2.0
58
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length unit. Length units for this property may not be negative.
thin
A border which is thinner than a border set to medium. The exact width is not defined by the CSS
specification.
medium
A border which is thicker than a border set to thin, and thinner than a border set to thick. The exact
width is not defined by the CSS specification.
thick
A border which is thicker than a border set to medium. The exact width is not defined by the CSS
specification.
Note Length and keyword values may be mixed together. If there are four values
declared, they apply in the order: top, right, bottom, left. In the case of three
values, the first will apply to the top border, the second to the left and right
borders, and the third to the bottom border. If two values are declared, the first
applies to the top and bottom borders, while the second applies to the left and
right borders. If one value is declared, it applies to all four sides.
Note that a border’s width will be reset to 0 if the value of the property border-style is none.
Examples
p.aside {border-width: 1em;}
ul {border-width: thick 1px;}
h2 {border-width: 0.66ex thin 1mm;}
Related Properties
border, border-bottom-width, border-left-width,
border-right-width, border-top-width
bottom
bottom defines an offset of the bottom edge of an absolutely positioned element from the bottom edge
of its positioning context, or the vertical distance which a relatively positioned element will be displaced.
Summary
Value Syntax
Initial Value
auto
Percentages
refer to height of containing block
Inherited
no
Applies to
positioned elements
Cascading Style Sheets 2.0
59
Media Groups
visual
Values
A fixed distance from the bottom of the positioning context.
Some percentage of the height of the positioning context, assuming that the height of the context has
been set explicitly. If not, then a percentage value for bottom is treated as though it were auto. In
practice, this means that percentage values for bottom set on relatively positioned elements will be
ignored.
auto
The actual distance which results will depend on a number of factors. These factors are the dimensions
of vertical measure for an absolutely positioned element (see the notes section). If the element has
been relatively positioned, then auto has no apparent effect.
Note In the case of an absolutely positioned element, the vertical dimensions of the
element must add up to the height of the positioning context. If every measure of
vertical distance besides bottom is explicitly set, then a value of auto is changed
to make sure that they all add up to the height of the positioning context.
Similarly, if all of the vertical dimensions including bottom are explicitly set, but do
not add up to the height of the positioning context, then the value for bottom is
discarded, and the necessary value is substituted. In both cases, a negative
distance may be assigned to bottom. In addition, setting bottom to auto may force
other vertical dimensions which are also set to auto to be reset to 0. See the
section on positioning calculations in Chapter 1 for more information.
In the case of relatively positioned elements, bottom defines a vertical offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for bottom will offset the
element upward, and negative values will move it downward. If both top and bottom are set to explicit
values, then the value for bottom will be discarded in favor of top.
Examples
div.sidebar {position: absolute; width: 90%; margin: 0; padding: 0;
height: auto; bottom: 13%;}
sub {vertical-align: baseline; position: relative; bottom: -0.5em;}
Related Properties
height, left, position, right, top
caption-side
caption-side determines the placement of the element box of a table’s caption.
Summary
Value Syntax
top | bottom | left | right | inherit
Initial Value
top
Percentages
n/a
Inherited
yes
Applies to
elements with a display of table-caption
Media Groups
visual
Cascading Style Sheets 2.0
60
Values
top
Places the caption’s element box above the table box. The element box will be treated as a block-level
box immediately preceding the table, with two exceptions. First, the caption will inherit styles from the
table, and any ancestor elements within the table. Second, the caption is not considered to be a blocklevel
element for the purposes of any element which precedes the table and has a display of either
compact or run-in. The element box is treated as a block-level element for the purposes of width
calculations, although these are done with the table’s element box as the parent.
bottom
Places the caption’s element box below the table box. Much as with caption-side: top, the element
box will be treated as a block-level box which immediately follows the table, will inherit styles from the
table, and has its width calculated with respect to the table’s element box.
left
Places the caption’s element box to the left of the table box. The width of this caption may be explicitly
set; or, if set to auto, will be determined by the user agent. The caption may be aligned vertically with
respect to the table’s element box using the property vertical-align. In this case, only the values
top, middle, and bottom will be honored. Any other vertical-align value set on a caption will be
treated as top.
right
Places the caption’s element box to the right of the table box. Otherwise, this has the same effect as the
value left.
Note If the value of caption-side is right or left, the caption will be placed outside the
table’s element box, including any margins. Since setting the width of a left- or
right-side caption to auto leaves the actual width up to the user agent, it is
recommended that authors set explicit widths for such captions.
Examples
caption {caption-side: left; width: 10em; text-align: right;
vertical-align: top;}
td.label {display: table-caption; caption-side: bottom;
margin-top: 0.33em; width: 80%;}
table {caption-side: top;}
Related Properties
display
clear
clear prevents an element from being displayed next to floated elements.
Summary
Value Syntax
none | left | right | both | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
block-level elements
Media Groups
visual
Cascading Style Sheets 2.0
61
Values
none
Floated elements may appear on either side of the element.
left
Floated elements may not appear to the left of the element. If a floated element would appear to the left
of the element, the top margin of the element is increased until the top outer edge of the element’s
border is just below the bottom outer edge of the floated element.
right
Floated elements may not appear to the right of the element. The top margin will be increased as
necessary to ensure this.
both
Floated elements may not appear on either side of the element, and the top margin is increased, if
necessary, to ensure this.
Note The value for clear only affects the display of an element with regard to floated
elements which appear earlier in the document. If an element has descendant
elements which are floated, they are not considered for the purposes of clear on
that element.
Examples
h2 {clear: right;}
img.illus {float: left; clear: left;}
Related Properties
float
clip
clip defines the area outside which an absolutely positioned element’s content is not visible.
Summary
Value Syntax
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
block-level and replaced elements
Media Groups
visual
Values
A shape descriptor. As of CSS2, there is only one valid shape: rect(top right bottom left).
According to CSS2, the four values within rect(...) define offsets from the content edge of the
positioned element, and each one may be either a length value or auto. Thus, rect(10px 10px 10px
10px) would describe a clipping region inset by ten pixels from each edge of the content area.
However, Internet Explorer implemented this shape as rect(top-x top-y width height). Thus,
rect(10px 10px 20px 10px) would define a clip rectangle which begins 10 pixels below the top of
the content area, and 10 pixels to the right of the left edge, and which is 20 pixels wide by 10 pixels tall.
Cascading Style Sheets 2.0
62
Furthermore, Explorer treats clip as a method of clipping all aspects of an element—background,
borders, content, and anything else.
auto
The clipping region is equivalent to the content area of the positioned element.
Note The value given for clip applies only if the property overflow has been set to a
value other than visible for the affected element.
As of this writing, the specification and implementation were still out of step with regard to the syntax of
rect(...). There were proposals to change the meaning of clip to match Internet Explorer, and also
to reintroduce the original meaning of clip as another property, but this had not occurred by the time
this text went to press.
In either case, it is possible to define clipping regions which are larger than the element’s content area.
This will not affect the layout of the content, but may affect how much of it is visible. For example,
imagine an element which is seven lines tall, but which contains seventeen lines of text. If the
overflow is set to hidden and the clipping region is set to clip: auto, then only the first seven lines
of content will be visible; the rest will be hidden. Now assume a clipping region of rect(0 0 –1em 0),
using the W3C syntax instead of the Explorer method. This will extend the bottom of the clipping area
down by one em—effectively, the height of a line—and so the eighth line will be visible. This will not
change the size of the element’s box, however, so it is possible that the eighth line will be drawn outside
the borders of the element, or within its padding, or possibly overlapping the border. This would also be
possible in Internet Explorer, although with a different syntax: something like rect(0 0 200px 8em),
assuming that the element’s box is known to be 200 pixels wide and 7em tall.
Examples
div.aside {position: absolute; width: 50%; height: auto;
overflow: hidden; clip: rect(1em 0.5em 1em 0.5em);}
p.scroller {height: 7em; overflow: scroll; clip: auto;}
#spillout {position: absolute; overflow: hidden;
clip: rect(0 0 –5em 0);}
Related Properties
overflow
color
color sets the foreground color of an element (typically, the color of the text).
Summary
Value Syntax
Initial Value
UA dependent
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
Cascading Style Sheets 2.0
63
Any permitted color value.
Note It is strongly recommended that authors who set a foreground color on an
element also set a background color for the same element. Omitting the
background leads to the possibility of color conflicts among the author’s styles,
reader stylesheets, and the user agent’s defaults. For example, if an author sets
an H1 with a class of title to have a white foreground, and a reader’s stylesheet
sets the background color of all H1 elements to be white, then the combination of
the two could lead to an H1 with white text on a white background.
The value declared for color is used as the default color of any borders which may appear on the
element. This default can be overridden with the various border-color-related properties.
Using the keyword inherit with the property color will result in a sickly green in Navigator 4.x.
Examples
h1 {color: maroon;}
p.sunny {color: yellow;}
a:link {color: blue;}
a:visited {color: purple;}
Related Properties
border-color
content
content defines content to be inserted in generated content operations.
Summary
Value Syntax
[
no-open-quote | no-close-quote ]+
| inherit
Initial Value
empty string (“”)
Percentages
n/a
Inherited
no
Applies to
:before and :after pseudo-elements
Media Groups
all
Values
Any permitted string value. This is always enclosed in quotation marks.
A pointer to an external resource such as an image. If the user agent cannot display the resource, then
the reference is ignored. It is theoretically possible to include the contents of an entire text or HTML file
in this manner. If a resource such as an image is included in the document, there is no way to provide
an alternate text description or other accessibility features for the resource.
There are two possible forms of this value: counter(name, style?) and counters(name,
string,? style?). In both cases, the content will be the value of the named counter at that point in
the document, rendered in the optional style value (decimal by default). In the case of
Cascading Style Sheets 2.0
64
counters(...), the optional string value indicates a string to follow each instance of the named
counter. See counter-increment for more details.
attr(X)
Causes the insertion of the value of attribute X for the selector’s subject. For example, it is possible to
display the value of the alt attribute of an image using this value. If the attribute does not exist for that
element, an empty string is returned.
open-quote
Causes the insertion of the appropriate string specified using the property quotes.
close-quote
Causes the insertion of the appropriate string specified using the property quotes.
no-open-quote
Prevents the insertion of the appropriate string specified using the property quotes. However, the
nesting level of the quotation marks is still increased.
no-close-quote
Prevents the insertion of the appropriate string specified using the property quotes. However, the
nesting level of the quotation marks is still decreased.
Note Any styles which are applied to the parent element will be applied to the
generated content. It is also possible to style the generated content separately
from the contents of its parent.
Examples
p.aside:before {content: "aside – "; font-weight: bold;
color: gray;}
p:after {content: url(paramark.gif);}
li:before {content: counters(list-count, ".", lower-roman);}
a:after {content: "[" attr(href) "]"; font-size: smaller;}
Related Properties
:after, :before, counter-increment, counter-reset, quotes
counter-increment
counter-increment increases the value of a named counter.
Summary
Value Syntax
[
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
all
Values
The name of a counter. The name can be any string value. If the name has not been previously reset
using the property counter-reset for the particular scope in which it occurs (see the notes section),
the named counter is assumed to have been set to zero by the root element of the document.
Cascading Style Sheets 2.0
65
Defines an increment for the named counter each time the element appears in the document. This
increment can be zero, or even negative. If no integer is provided, the counter is incremented by one.
none
No increment is performed.
Note If an element is set to display: none, then any counters for that element will not be
incremented. If the element is set to visibility: hidden, on the other hand, then any
counters will be incremented. If an element has both counter-increment and
counter-reset declared, then the counter is first reset and then incremented. More
than one counter may be reset at a time.
Although counters may be incremented (and reset) on a given element, the property content is what
causes the counter to be displayed. It does this with its two counter-related values, counter(name,
style?) and counters(name, string?, style?). These are explained here due to their
dependence on counter-increment to operate effectively.
counter(name, style) is used to increment a counter within its current scope. The style portion is
optional, and may use any of the permitted values for list-style-type, including circle, disc,
and square. Every time an element resets a named counter using the property counter-reset, it
creates a scope for that counter. Different scopes can use the same named counter without collision;
thus, the counting of labels for nested lists can be easily represented. For example, the traditional HTML
method of counting nested lists can be represented as:
ol {counter-reset: list-count;}
li:before {content: counter(list-count) ". ";
counter-increment: list-count;}
As ordered lists are nested deeper, each “level” creates its own scoped version of list-count. Since
the default list style is decimal, it does not need to be specified here.
Use of the value counters(name, string, style) results in an accumulation of scoped counters,
instead of just displaying the counter for the current scope. Thus, changing the previous example to use
counters(list-count, ".") would result in counters in the style "1.2", "1.2.1", and so on. At each
nesting level, the newly scoped counter and the string will be added on to the previous counter(s).
Similarly, counters(list-count, "-") would result in "1-2", "1-2-1", and so on.
Examples
h2:before {color: green; counter-increment: section;
content: "Section " counter(section, upper-alpha) ". ";}
ol li:before {counter-increment: list-count;
content: counters(item, ".", decimal; font-style:
italic;}
ol.thirds li {counter-increment: triples 3 list-count 1;}
Related Properties
content, counter-reset
counter-reset
counter-reset sets a named counter to a specific value.
Summary
Value Syntax
[
Initial Value
none
Percentages
n/a
Inherited
no
Cascading Style Sheets 2.0
66
Applies to
all elements
Media Groups
all
Values
The named counter to be reset.
The number to which the named counter should be reset. If no integer is given, then the counter is reset
to 0. Negative values are permitted.
none
No reset is performed.
Note If an element has both counter-increment and counter-reset declared, then the
counter is first reset and then incremented. More than one counter may be reset
at a time.
Examples
h1 {counter-reset: chapter section sub-section;}
pre.example {counter-reset: examples;}
ol.fifth {counter-reset: list-counter -5;}
Related Properties
content, counter-increment
cursor
cursor changes the appearance of the cursor (mouse pointer) when it is hovering over an element;
that is, at the time when the pointer is within the element’s box.
Summary
Value Syntax
[ [
ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize |
w-resize| text | wait | help ] ] | inherit
Initial Value
auto
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual, interactive
Values
A pointer to a resource containing a cursor appearance. If the user agent cannot resolve the URL, or
cannot handle the resource to which it points, then it must use a generic cursor. Since there is no
Cascading Style Sheets 2.0
67
standard for cursor resources in CSS, this feature is functionally disabled in all browsers known at the
time of this writing.
auto
The user agent determines the cursor appearance for a given context.
crosshair
A crosshair symbol not unlike the plus sign (+).
default
The user-agent or platform-dependent default cursor. Usually an arrow, but may be something else due
to the operating system, user-installed software, or other factors.
pointer
The cursor which is used to indicate that a link is being hovered. On most systems, this is a small hand
with a pointing finger.
move
The cursor gives the appearance that the element can be moved. On many systems, this is a pair of
two-way arrows in a cross formation, not unlike taking the crosshair cursor and adding arrowheads to
the four points.
e-resize
The cursor gives the appearance of allowing size to be increased to the right. This is usually an arrow
pointing to the right.
ne-resize
The cursor gives the appearance of allowing size to be increased both to the right and upward. This is
usually an arrow pointing in the direction of the top right corner of the display.
nw-resize
The cursor gives the appearance of allowing size to be increased both to the left and upward. This is
usually an arrow pointing in the direction of the top left corner of the display.
n-resize
The cursor gives the appearance of allowing size to be increased upward. This is usually an arrow
pointing to the top of the display.
se-resize
The cursor gives the appearance of allowing size to be increased both downward and to the right. This
is usually an arrow pointing in the direction of the bottom right corner of the display.
sw-resize
The cursor gives the appearance of allowing size to be increased both downward and to the right. This
is usually an arrow pointing in the direction of the bottom left corner of the display.
s-resize
The cursor gives the appearance of allowing size to be increased downward. This is usually an arrow
pointing to the bottom of the display.
w-resize
The cursor gives the appearance of allowing size to be increased to the left. This is usually an arrow
pointing to the left.
text
The cursor gives the appearance of allowing a text selection, as with drag-selection of text to be copied.
This is usually an “I-bar,” so named for its resemblance to a capital “I.”
wait
The cursor gives the appearance that the program is busy and that the user should wait. This is typically
an hourglass or watch icon.
help
Cascading Style Sheets 2.0
68
The cursor gives the appearance that there is help available. This is typically rendered as a question
mark.
Note Because users are generally very attuned to changes in the cursor’s appearance
and expect that certain cursors have certain meanings, authors should use
caution in employing this property.
Examples
p {cursor: text;}
div.confuse {cursor: wait;}
a.helpsys:link, a.helpsys:visited {cursor: help;}
Related Properties
None
direction
direction indicates the writing direction to be used in the rendering of an element.
Summary
Value Syntax
ltr | rtl | inherit
Initial Value
ltr
Percentages
n/a
Inherited
No comments:
Post a Comment