h4 {margin-top: 1.5em;}
table {margin-top: 4%;}
img.drop {margin-top: 12px;}
Related Properties
margin, margin-bottom, margin-left, margin-right
marker-offset
marker-offset defines the distance between the nearest border edges of a marker and its
associated principal box.
Summary
Value Syntax
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
elements with a display of marker
Media Groups
visual
Values
Any length value. This sets the distance between the marker’s edge and the nearest edge of the
principal box. Negative values are permitted.
auto
The distance between the marker’s edge and the nearest edge of the principal box is determined by the
user agent.
Cascading Style Sheets 2.0
96
Note For more details on markers, refer to the entry for marker in the property display.
Examples
li:before {display: marker; marker-offset: 1.25em;
width: 30px; content: url(spiral.jpg);}
p.aside:after {display: marker; marker-offset: 10px;
content: " (End of aside.)";}
Related Properties
display
max-height
max-height sets an upper bound on the height of an element.
Summary
Value Syntax
Initial Value
none
Percentages
refer to height of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values
Any length unit. The element can never have a value for height which exceeds this distance.
Limits the element’s height to be at most this percentage of the height of the containing block. If the
containing block’s height changes— due to document reflow triggered by a change in the default font
size, for example—then the maximum height of the element will change with it.
none
There is no limit to the height of the element.
Note See the section on calculating element heights in Chapter 1 for more details on
how max-height affects layout.
Examples
img {max-height: 40px;}
p.aside {max-height: 10em;}
div.sidebar {max-height: 50%;}
Related Properties
height, min-height
Cascading Style Sheets 2.0
97
max-width
max-width sets an upper bound on the width of an element.
Summary
Value Syntax
Initial Value
none
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values
Any length unit. The element can never have a value forwidth which exceeds this distance.
Limits the element’s width to be at most this percentage of the width of the containing block. If the
containing block’s width changes—due to document reflow triggered by a change in the size of the
browser window, for example—then the maximum width of the element will change with it.
none
There is no limit to the width of the element.
Note See the section on calculating element widths in Chapter 1 for more details on
how max-width affects layout.
Examples
p {max-width: 90%;}
img.sidefig {max-width: 200px;}
div.sidebar {max-width: 20em;}
Related Properties
min-width, width
min-height
min-height sets a lower bound on the height of an element.
Summary
Value Syntax
Initial Value
0
Percentages
refer to height of containing block
Inherited
no
Cascading Style Sheets 2.0
98
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values
Any length unit. The element can never have a value for height which is lower than this distance.
Limits the element’s height to be at least this percentage of the height of the containing block. If the
containing block’s height changes—due to document reflow triggered by a change in the default font
size, for example—then the minimum height of the element will change with it.
Note See the section on calculating element heights in Chapter 1 for more details on
how min-height affects layout.
Examples
div.top {min-height: 85px;}
img {min-height: 10px;}
h1 {min-height: 1em;}
Related Properties
height, max-height
min-width
min-width sets a lower bound on the width of an element.
Summary
Value Syntax
Initial Value
UA dependent
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values
Any length unit. The element can never have a value for width which is less than this distance.
Limits the element’s width to be at least this percentage of the width of the containing block. If the
containing block’s width changes—due to document reflow triggered by a change in the size of the
browser window, for example—then the maximum width of the element will change with it.
Note See the section on calculating element widths in Chapter 1 for more details on
how max-width affects layout.
Cascading Style Sheets 2.0
99
Examples
p {min-width: 10em;}
img {min-width: 25px;}
h2 {min-width: 50%;}
Related Properties
max-width, width
outline
outline is a shorthand property which is used to set the width, color, and style of an outline around an
element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values
Any permitted value of the property outline-color.
Any permitted value of the property outline-style.
Any permitted value of the property outline-width.
Note An outline is usually applied to an element when it has focus (i.e., is the current
subject of user interaction). However, there is no restriction on the type or state of
elements to which outlines may be applied. An outline could be drawn around
every paragraph just as easily as around the link which has focus. Outlines are
drawn along the outside edge of the element’s borders, and do not trigger reflow
of the document when they are drawn or removed. Thus, they may be drawn over
the background, or (if wide enough) even the borders, background, or content of
other elements.
Examples
a:hover {outline: 1px dotted invert;}
input:focus {outline: blue 0.5ex outset;}
h1 {outline: purple solid 1em;}
Related Properties
:focus, outline-color, outline-style, outline-width
outline-color
outline-color sets the color for an outline around an element.
Cascading Style Sheets 2.0
100
Summary
Value Syntax
Initial Value
invert
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values
Any color value.
invert
The outline performs a color inversion of the area where it is drawn. This is analogous to a “reverse
video” effect, and ensures that the outline will be visible regardless of the background color(s) behind it.
Note Unlike the element’s border, an outline can only have one color.
Because outlines can overwrite other elements, as well as any backgrounds behind the element to
which the outline is applied, authors are encouraged to use the color keyword invert whenever
possible.
Examples
input:focus {outline-color: invert;}
h1.high {outline-color: invert;}
Related Properties
:focus, outline, outline-style, outline-width
outline-style
outline-style determines the style of an outline around an element.
Summary
Value Syntax
none | dotted | dashed | solid | double | groove | ridge | inset |
outset | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
Cascading Style Sheets 2.0
101
visual, interactive
Values
none
No outline is drawn. The primary side effect of this value is that the computed outline-width for the
outline in question will be set to 0.
dotted
The outline is drawn as a series of dots. The specific placement of these dots is left to the user agent.
dashed
The outline is drawn as a series of short line segments. The specific placement of these lines is left to
the user agent.
solid
The outline is drawn as a single unbroken line.
double
The outline is drawn as a pair of unbroken lines. The specific placement of these lines, including the
separation between them, is left to the user agent.
groove
The outline is drawn as though it were a furrow carved into the surface of the document. This implies a
“shading” of the outline, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each outline into two adjacent lines, and darkening the upper (or
leftward) half while lightening the lower (or rightward) half of each outline.
ridge
The outline is drawn as though it were a ridge pushing up the surface of the document. This implies a
“shading” of the outline, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each outline into two adjacent lines, and lightening the upper (or
leftward) half while darkening the lower (or rightward) half of each outline.
inset
The outline is drawn as though the entire element is pushing the surface of the document away from the
user. This implies a “shading” of the outline, but the CSS specification does not describe this in detail.
Most user agents handle this shading by lightening the bottom and right outlines while darkening the top
and left outlines.
outset
The outline is drawn as though the entire element is pushing the surface of the document toward the
user. This implies a “shading” of the outline, but the CSS specification does not describe this in detail.
Most user agents handle this shading by darkening the bottom and right outlines while lightening the top
and left outlines.
Note
The value hidden, which is permitted for border styles, is not allowed for outline styles.
Examples
a:visited:focus {outline-style: dotted;}
pre.example {outline-style: outset;}
Related Properties
:focus, outline, outline-color, outline-width
outline-width
outline-width defines the width of the outline around an element.
Summary
Value Syntax
Cascading Style Sheets 2.0
102
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values
Any length unit. Length units for this property may not be negative.
thin
An outline which is thinner than an outline set to medium. The exact width is not defined by the CSS
specification.
medium
An outline which is thicker than an outline set to thin, and thinner than an outline set to thick. The
exact width is not defined by the CSS specification.
thick
An outline which is thicker than an outline set to medium. The exact width is not defined by the CSS
specification.
Note Because outlines can overwrite other elements, as well as any backgrounds
behind the element to which the outline is applied, authors are encouraged to
make their outlines as thin as possible. This will minimize the chances of the
outline overwriting and obscuring useful content.
Examples
a:link:hover{outline-width: 2px;}
select {outline-width: 0;}
input:focus {outline-width: thick;}
Related Properties
:focus, outline, outline-color, outline-style
overflow
overflow determines how content which overflows its element’s content area should be handled.
Summary
Value Syntax
visible | hidden | scroll | auto | inherit
Initial Value
visible
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
103
block-level and replaced elements
Media Groups
visual
Values
visible
Overflowing content should be displayed. The width of the content will be rendered as if the element
were tall enough to contain all of the content, but the element’s visible box will not be altered. This will
give the effect of the content “spilling out” of its element’s content area. The overflowing content will
almost certainly overlap portions of the padding, borders, and margins of its containing element, and
may in fact overlap parts of other elements.
hidden
Overflowing content should not be displayed. The region beyond which it is hidden is defined by the
value of the property clip.
scroll
Overflowing content should not be displayed, but the user agent should provide some means of
accessing the hidden content (e.g., a set of scrollbars). The region beyond which the content is not
shown is defined by the value of the property clip. Furthermore, the CSS2 specification recommends
that this value should always cause the scrolling mechanism to be rendered, regardless of whether it is
actually needed.
auto
The behavior caused by this value is dependent on the user agent. The CSS2 specification
recommends that if any content overflows, it should be accessible with a scrolling mechanism.
Note As of this writing, support for overflow is not very good. Of the known browsers,
only Navigator 6 comes close to properly supporting this property.
Examples
div.inset {overflow: scroll;}
td {overflow: hidden;}
p.aside {overflow: scroll;}
Related Properties
clip
padding
padding is a shorthand property which is used to set the padding on all four sides of an element.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Cascading Style Sheets 2.0
104
Values
Any length value. Negative length values are not permitted for the property.
The padding width is calculated with respect to the width of the element’s containing block (usually, but
not always, the content area of the parent element).
Note Length and percentage 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 padding, the second to the left and right
padding, and the third to the bottom padding. If two values are declared, the first
applies to the top and bottom padding, while the second applies to the left and
right padding. If one value is declared, it applies to all four padding.
For the effects of padding on inline elements, refer to the individual padding properties.
Examples
td {padding: 0.75ex;}
div.aside {padding: 1em 10px;}
h2 {padding: 0.5em 5% 0.25em 15px;}
Related Properties
padding-bottom, padding-left, padding-right, padding-top
padding-bottom
padding-bottom sets the width of the padding on the bottom of an element.
Summary
Value Syntax
[
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value. Negative length values are not permitted for this property.
The bottom padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content area of the parent element).
Note padding-bottom may or may not have an effect on non-replaced (e.g., text) inline
elements. User agents should assign the value of padding-bottom to these
elements, and it may increase the amount of background which is drawn. Any
borders set on the element will also be pushed away from the content of the
element. User agents are not, however, required to increase the visible
Cascading Style Sheets 2.0
105
background area of inline elements. Even if the user agent does increase the
visible background, it may or may not overwrite content in following lines. Authors
are thus encouraged to avoid setting bottom padding on inline elements.
Examples
h3 {padding-bottom: 5px;}
ul {padding-bottom: 1.5em;}
Related Properties
padding, padding-left, padding-right, padding-top
padding-left
padding-left sets the width of the padding on the left side of an element.
Summary
Value Syntax
[
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value.
The left padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content area of the parent element).
Note padding-left will have an effect on the layout of inline elements. In the case of
non-replaced elements like hyperlinks, the left padding is applied to the left side
of the element, and will extend the visible background of the element. It will also
push the border away from the element’s content. If the inline element is broken
across two or more lines, the left padding is applied to the left side of the element
on the first line in which it appears, and is not applied to the left sides of the
element in subsequent lines.
Examples
h2 {padding-left: 20px;}
pre {padding-left: 2em;}
div.column {padding-left: 10%;}
Related Properties
padding, padding-bottom, padding-right, padding-top
Cascading Style Sheets 2.0
106
padding-right
padding-right sets the width of the padding on the right side of an element.
Summary
Value Syntax
[
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value.
The right padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content-area of the parent element).
Note padding-right will have an effect on the layout of inline elements. In the case of
non-replaced elements like hyperlinks, the right padding is applied to the right
side of the element, and will extend the visible background of the element. It will
also push the border away from the element’s content. If the inline element is
broken across two or more lines, the right padding is applied to the right side of
the element on the last line in which it appears, and is not applied to the right
sides of the element in following lines.
Examples
h1 {padding-right: 5%;}
p.example {padding-right: 40px;}
Related Properties
padding, padding-bottom, padding-left, padding-top
padding-top
padding-top sets the width of the padding on the top of an element.
Summary
Value Syntax
[
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Cascading Style Sheets 2.0
107
Applies to
all elements
Media Groups
visual
Values
Any length value.
The padding’s width is calculated with respect to the width of the element’s containing block (usually,
but not always, the content area of the parent element).
Note padding-top may or may not have an effect on non-replaced (e.g., text) inline
elements. User agents should assign the value of padding-top to these elements,
and it may increase the amount of background which is drawn. Any borders set
on the element will also be pushed away from the content of the element. User
agents are not, however, required to increase the visible background area of
inline elements. Even if the user agent does increase the visible background, it
may or may not overwrite content in preceding lines. Authors are thus
encouraged to avoid setting top padding on inline elements.
Examples
h3 {padding-top: 8px;}
pre.code {padding-top: 0.5em;}
Related Properties
padding, padding-bottom, padding-left, padding-right
position
position determines the method by which an element’s box is laid out.
Summary
Value Syntax
static | relative | absolute | fixed | inherit
Initial Value
static
Percentages
n/a
Inherited
no
Applies to
all elements, but not to generated content
Media Groups
visual
Values
static
The element box is laid out as a part of the normal document flow, following the preceding element and
preceding following elements. Its content will flow around any floated elements. If an element is set to
this type of positioning, any values for left and top will be ignored.
relative
Cascading Style Sheets 2.0
108
The element’s box is laid out as a part of the normal flow, and then offset by some distance. The offset
distance is declared through some combination of the properties left, right, top and bottom; if
these all have a value of 0, then the box is not offset. The space which the element would normally
have occupied is preserved, and other elements in the document are laid out as though the relatively
positioned element were still a part of the normal flow. It is possible that the relatively positioned
element will overlap other elements. A relatively positioned element, even one which is not offset,
establishes a containing block for its descendant elements.
absolute
The element’s box is laid out in relation to its containing block, and is entirely removed from the normal
flow of the document. The containing block of an absolutely positioned element is the nearest ancestor
element with a position other than static. If no such ancestor exists, then the containing block is
the root element of the document. The edges of the absolutely positioned element’s box are positioned
via the properties left, right, top and bottom, which specify offsets from the edges of the
containing block. The space which the element would have occupied had it remained in the normal flow
is closed up as though the element did not exist, and other elements are laid out as though the
absolutely positioned element did not exist. Care must be taken to ensure that the positioned element
does not overlap other elements. Since the containing block will always be some element within the
document, or the root element, an absolutely positioned element will scroll with the rest of the
document.
fixed
The element’s box is absolutely positioned, with all of the behaviors which are described for
position: absolute. The major difference is that the containing block of a fixed-position element is
always the viewport. In Web browsers, this would be the browser window, and so a fixed-position
element will not scroll with the rest of the document. In paged media, each page is a viewport. Thus, a
fixed-position element in paged media will appear on every page, which can be used to simulate effects
such as running footers. See Chapter 6 for more details.
Note A common method of establishing a containing block for absolutely positioned
elements is to set an ancestor element to position: relative with no offsets. This
will cause no visible change to the relatively positioned ancestor, but will define
the desired containing block for any descendant elements.
Examples
img#lead {position: absolute;}
div.top {position: fixed; top: 0; height: 10% width: 100%;}
sup {position: relative; bottom: 0.66em;}
Related Properties
bottom, left, right, top, z-index
quotes
quotes is used to define the quotation pairs which are used at each level of nested quotation.
Summary
Value Syntax
[
Initial Value
UA dependent
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Cascading Style Sheets 2.0
109
Values
A pair of string values which are used to represent the open- and close-quotes. These are always in the
order of open-quote first, and close-quote second. The first pair of marks is used for the first (or
outermost) level of quotation, the second pair for the next level of nested quotation, and so on. An
arbitrary number of quotation pairs may be supplied. Single-quote marks may be enclosed by doublequote
marks, and vice versa.
none
This prevents the values open-quote and close-quote on the property content from generating
any quotation marks.
Note Although this property can be used to create customized quotation schemes, it is
most useful for supplying quotation schemes for languages which the user agent
may not recognize.
Examples
blockquote {quotes: ‘"’ ‘"’ "’" "’";}
q:lang(fr) {quotes: "<<" ">>" "<" ">";}
Related Properties
content
right
right defines an offset of the right edge of an absolutely positioned element from the right edge of its
positioning context, or the horizontal distance which a relatively positioned element will be displaced.
Summary
Value Syntax
Initial Value
auto
Percentages
refer to width of containing block
Inherited
no
Applies to
positioned elements
Media Groups
visual
Values
A fixed distance from the bottom of the positioning context.
Some percentage of the width of the positioning context, assuming that the width of the context has
been set explicitly. If not, then a percentage value for right is treated as though it were auto. In
practice, this means that percentage values for right 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 horizontal 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 horizontal dimensions of the
element must add up to the width of the positioning context. If every measure of
Cascading Style Sheets 2.0
110
horizontal distance besides right is explicitly set, then a value of auto is changed
to make sure that they all add up to the width of the positioning context. Similarly,
in left-to-right writing modes such as English, if all of the horizontal dimensions
including right are explicitly set, but do not add up to the width of the positioning
context, then the value for right is discarded, and the necessary value is
substituted. In both cases, a negative distance may be assigned to right. If right is
set to auto in right-to-left writing modes such as Hebrew, then the right edge of
the positioned element should be aligned with the place where it would have
appeared had the element not been positioned.
In addition, setting right to auto may force other horizontal 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, right defines a horizontal offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for right will offset the
element to the right, and negative values will move it to the right. In right-to-left writing modes such as
Hebrew, if both right and left are set to explicit values, then the value for left will be discarded in
favor of right.
Examples
div.sidebar {position: absolute; width: auto;
left: 10%; right: 50%;}
em.slide-right { position: relative; right: -1em;}
Related Properties
bottom, left, position, top, width
table-layout
table-layout determines the layout method used in rendering a table.
Summary
Value Syntax
auto | fixed | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
elements with a display of table or inline-table
Media Groups
visual
Values
auto
The table should be laid out according to some automatic layout algorithm. There is a suggested
algorithm given in the CSS specification, but the specification does not require that a particular
algorithm be used, so it is up to each user agent to implement its own method.
fixed
The table should be laid out according to the provided fixed-table layout method. This method states
that the table’s width is given with the property width. If the value given for width is auto, then the
value for table-layout is changed to auto. If not, then column widths are determined by the
following rules:
If the column element has a width other than auto, then the declared value sets the width
of the column.
Cascading Style Sheets 2.0
111
If the column’s width is set to auto, then the first cell in the column which does not have
width: auto will set the width of the column. If that cell spans multiple columns, then its width
is divided evenly between the spanned columns.
Any remaining columns will evenly divide the amount of horizontal space available,
subtracting any borders or cell spacing.
Once these steps are performed, then the width of the table is either the value of the property width
set on the table, or the sum of the width of all the columns, borders, and cell spacing, whichever is
greater. If the table’s width exceeds that of its columns, then all columns should be widened equally until
the aggregate column, border, and cell spacing widths equal the width of the table. Once the table has
been laid out, any content which cannot fit into its cell will overflow according to the value of the property
overflow. Since the specification does not say anything about the height of rows, it will be up to user
agents to invent their own solutions, which may vary.
Note The CSS specification provides an algorithm for calculating cell and row heights
which does not depend on the width algorithms described above. In summary, a
row’s height is largely dependent upon the cells within that row. A table row must
be at least as tall as the tallest cell in that row, regardless of any value assigned
to the row element’s height. Similarly, any cell must be tall enough to display all of
its content, regardless of any value assigned to the cell element’s height.
However, the specification does not say what should happen in the following circumstance:
The table’s declared height does not equal the aggregate height of the rows, borders, and
cell spacing.
Nor does it explain the following:
The meaning of percentage values assigned to the property height when set on table cells,
table rows, or table row groups.
The effect that cells which span multiple rows will have on row-height calculations, except to
say that the row heights must add up to a height tall enough to contain the spanning cell.
Given these ambiguities, authors should expect that user agents will differ in their handling of height
calculations for tables.
Examples
table.granite {table-layout: fixed;}
table {table-layout: auto;}
Related Properties
border-collapse, cell-spacing, empty-cells
text-align
text-align determines the way in which line boxes are aligned within a block-level element.
Summary
Value Syntax
left | right | center | justify |
Initial Value
depends on UA and writing direction
Percentages
n/a
Inherited
yes
Applies to
block-level elements (except the value
Media Groups
visual
Cascading Style Sheets 2.0
112
Values
left
The left edge of each line box is aligned with the left edge of the block-level element’s content area.
right
The right edge of each line box is aligned with the right edge of the block-level element’s content area.
center
The center of each line box is aligned with the center of the block-level element’s content area.
justify
The edges of each line box should align with the edges of the block-level element’s content area. This
may be accomplished by programmatically increasing the letter- and word-spacing of text within a given
line, but the CSS specification does not require a particular method. User agents are permitted to
interpret this value as either left or right, depending on the writing direction for the element.
The content of cells in a column will align on the given string. This value may be applied only to table
cells; if set on other types of elements, the value is treated as either left or right, depending on the
writing direction for the element. As of this writing, no known user agent supports this value.
Note The value justify provides the effect of "full justification" or "double justification,"
which is a time-honored way of laying out text in print media. However, fully
justified text can actually be more difficult to read on a computer screen, so
authors are urged to use justify with caution.
Examples
p.column {text-align: justify;}
td.total {text-align: ".";}
div.rightside {text-align: right;}
Related Properties
direction, letter-spacing, word-spacing
text-decoration
text-decoration is used to add "decorations" to inline content.
Summary
Value Syntax
none | [ underline || overline || line-through || blink ] | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
none
No decoration should be added to the inline text.
underline
Cascading Style Sheets 2.0
113
An underline is drawn beneath the inline text.
overline
An overline is drawn above the inline text.
line-through
A line should be drawn through the middle of the inline text. Note that “middle” does not imply “vertical
center,” as the line will most likely be drawn closer to the center of lowercase characters than the actual
center of the character boxes.
blink
The inline text should blink on and off, analogous to the BLINK element introduced by Netscape. User
agents are not required to support this value.
Note If this property is set on a block-level element, it will actually affect the inline
content of the element.
The color of any text decoration is set by the foreground color of the text. However, it is not always the
case that the color of an element will match the color of the text decoration near it. This can occur due
to the “spanning” of an element by the decoration set on an ancestor element.
A text decoration is not inherited by descendant elements. However, the decoration set on an element
will affect the entire element, including any descendants. Consider a hyperlink which has been set to
text-decoration: underline. Within the hyperlink is an EM element. Since the EM does not inherit
the decoration, its value for text-decoration is none. The underline still continues underneath the EM,
however, since it is a descendant of the hyperlink. This is referred to as the "spanning" of descendant
elements by a text decoration.
This has some interesting consequences. Take the hyperlink-EM example, and assume that the
hyperlink and its underline are colored blue, while the EM is colored red. The hyperlink’s underline will
be blue, even when it appears beneath the red EM element. Thus, it is possible for a text decoration’s
color to be different than the color of the text near it. It is also possible for a decoration to cut through
text. Take an underlined element which contains a SUB (subscript) element. The subscripted text will be
lowered with respect to its parent element’s text, but the parent’s underline will not change position.
Thus the subscripted text will likely overlap the underline.
If an element contains no text, then this property is ignored. Thus, it is not possible to underline an
image by using text-decoration. However, images may have underlines appear beneath them due
to the "spanning" described earlier.
In many Web browsers, setting an element’s text-decoration value to none will prevent the display
of any decorations within that element, even if it should have been spanned by the decoration of a
parent element. The exceptions are Internet Explorer 5 for Macintosh, Navigator 6, and Opera 4+
(although Opera still does not span decorations across images).
Examples
a[href] {text-decoration: underline;}
p.old {text-decoration: line-through;}
blink {text-decoration: blink;}
Related Properties
None.
text-indent
text-indent defines an indentation distance for the first line of text in a block-level element.
Summary
Value Syntax
Initial Value
0
Percentages
refer to width of containing block
Cascading Style Sheets 2.0
114
Inherited
yes
Applies to
block-level elements
Media Groups
visual
Values
Any length value. Negative lengths are permitted for the property, and will produce a “hanging indent”
effect. Authors should be sure to increase the element’s margin so that the hanging indent can still be
seen, especially if the edge of the element is close to the edge of the viewport.
The first line of text is indented by a distance relative to the width of the element’s containing block. The
computed indentation will be the same regardless of the width of the element, so it is possible to specify
an indentation which is greater than the width of the element. The CSS specification does not say what
should happen in such cases.
Note text-indent is a simple way to produce the "tabbed first line" effect common in
print media.
Examples
p {text-indent: 3em;}
div.hang {text-indent: -40px; margin-left: 40px;}
p.odd {text-indent: 50%;}
Related Properties
None
text-shadow
text-shadow specifies one or more shadows which are derived from the text of an element.
Summary
Value Syntax
none | [
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
none
Cascading Style Sheets 2.0
115
No shadows should be associated with the element.
Any color value. This gives the color of the shadow. If no color is provided, the shadow’s color is taken
from the value of the property color for the element.
The offset distances and blur radius for the shadow, in the order x-offset, y-offset, and blur radius. The
two offset values are required for any shadow, but the blur radius is optional. Negative values are
permitted for the offset lengths, but not the blur radius. A negative x-offset will place the shadow to the
left of its text, and a negative y-offset will place the shadow above the text.
Note This is the mechanism by which authors may add “drop shadows” to their text
without having to resort to graphics. The CSS specification does not say how, or
even whether, shadows should be blended with their backgrounds, nor exactly
how the blur should be calculated.
A shadow does not affect the size of the element’s box, and may in fact extend beyond the element.
The shadows are considered a part of their element’s stacking context (see z-index for more details),
and so may overlap other elements. The specification does not say how multiple shadows on the same
element should be stacked or blended.
By specifying no offset and a blur radius for an element, it is possible to provide a “glow” effect to the
element’s text. Caution should be used, however, since many such effects involve setting the text color
close to the background color, which will make the element very difficult to read in a user agent which
does not support text-shadow. As of this writing, that was all of them, so authors are urged to use this
property with caution.
Examples
h1 {text-shadow: 0.5em 0.4em 2px gray;}
p.raise {text-shadow: 1px 1px;}
div.crazy {text-shadow: 10px 1.2em 3px purple, -1in 23px 0 magenta,
0 2em 1em maroon, 3ex –2cm 5mm yellow;}
Related Properties
None
text-transform
text-transform changes the capitalization of text within an element, or else directs the user agent to
leave the capitalization "as is."
Summary
Value Syntax
capitalize | uppercase | lowercase | none | inherit
Initial Value
none
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
capitalize
Cascading Style Sheets 2.0
116
The first letter of each word in the element’s text should be capitalized. The CSS specification does not
say what a “word” is, and in fact the definition of what constitutes a word is likely to be different from
language to language. The usual working definition of a word is any sequence of characters which is
surrounded by whitespace, but this cannot be guaranteed.
uppercase
All of the characters in the element’s text should be uppercase (capital letters).
lowercase
All of the characters in the element’s text should be lowercase.
none
The capitalization of the element’s text should not be altered.
Note Although text-transform is inherited, it does not necessarily force the capitalization
of the first letter in a descendent element. If a portion of a word is enclosed within
an element, but there is no whitespace which separates this element from the text
that surrounds it, then the string of letters is considered to be a single "word" and
only the first letter in that word should be capitalized. Consider the following
markup:
supercalifragilisticexpialidocious
Only the first “S” would be capitalized, and the “f” at the beginning of the STRONG element would not.
Examples
*.shout {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
h1.title {text-transform: capitalize;}
Related Properties
None
top
top defines an offset of the top edge of an absolutely positioned element from the top 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
Media Groups
visual
Values
A fixed distance from the top of the positioning context.
Cascading Style Sheets 2.0
117
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 top is treated as though it were auto. In practice,
this means that percentage values for top 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. Setting top 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, top defines a vertical offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for top will offset the
element upward, and negative values will move it downward. If both bottom and top are set to explicit
values, then the value for top will be discarded in favor of bottom.
Examples
div.sidebar {position: absolute; width: 15em; margin: 0; padding: 0;
height: auto; top: 25%;}
sub {vertical-align: baseline; position: relative; top: 0.5em;}
Related Properties
bottom, height, left, position, right
unicode-bidi
unicode-bidi influences the layout of text in bidirectional-text situations.
Summary
Value Syntax
normal | embed | bidi-override | inherit
Initial Value
normal
Percentages
n/a
Inherited
no
Applies to
all elements, but see notes
Media Groups
visual
Values
normal
Prevents the element from opening a new level of Unicode bidirectional embedding.
embed
Causes the element to open a new level of Unicode bidirectional embedding, assuming the element is
inline-level. The direction of the new embedding level is taken from the value of the property
direction for the element, and reordering within the element is implicit. For direction: ltr, this
will have the effect of beginning the element with a Unicode LRE (U+202A); for direction: rtl, the
element begins with a Unicode RLE (U+202B). In either case, the ele- ment will be closed with a
Unicode PDF (U+202C).
bidi-override
Cascading Style Sheets 2.0
118
Causes an override of reordering mechanisms within the element, assuming the element is inline-level
or is a block-level element that contains only inline elements. In other words, glyphs within the element
are strictly ordered in the direction specified by the property direction, and implicit ordering is
ignored. For direction: ltr, this will have the effect of opening the element with a Unicode LRO
(U+202D); for direction: rtl, the element begins with a Unicode ROL (U+202E). In either case, the
element will be closed with a Unicode PDF (U+202C).
Note To quote the CSS2 specification: “The final order of the characters in each blocklevel
element is the same as if the bidi control codes had been added as
described..., markup had been stripped, and the resulting character sequence
had been passed to an implementation of the Unicode bidirectional algorithm for
plain text that produced the same line-breaks as the styled text. In this process,
no-textual entities such as images are treated as neutral characters, unless their
unicode-bidi property has a value other than normal, in which case they are
treated as strong characters in the direction specified for the element." Authors
who wish to understand this process in more detail should consult the Unicode
specification, as an explanation of its workings is (far) beyond the scope of this
book.
Examples
*:lang(en) {direction: ltr; unicode-bidi: embed;}
Related Properties
direction
vertical-align
vertical-align determines the alignment of text within a line, or within a table cell.
Summary
Value Syntax
baseline | sub | super | top | text-top | middle | bottom |
text-bottom |
Initial Value
baseline
Percentages
refer to the value of line-height for the element itself
Inherited
no
Applies to
inline-level elements and elements with a display of table-cell
Media Groups
visual
Values
baseline
The baseline of the element is aligned with the baseline of the parent element. If either element doesn’t
have a baseline, then align the bottom of the element box with the bottom of the parent element’s box.
sub
The baseline of the element is lowered to the point appropriate for subscripted text. The CSS
specification does not say what that point should be. Note that the value of font-size for the element
is not altered by this value.
super
The baseline of the element is raised to the point appropriate for superscripted text. The CSS
specification does not say what that point should be. Note that the value of font-size for the element
is not altered by this value.
top
Cascading Style Sheets 2.0
119
The top of the element’s box is aligned with the top of the line box, in the context of inline content, or
with the top of the table cell in the context of tables.
text-top
The top of the element’s box is aligned with the top of the highest inline box in the line.
middle
The baseline of the element is aligned with the point defined by the baseline of the parent element plus
half the x-height of the parent element’s font, in the context of inline content. The middle of the element
should be aligned with the middle of the table cell in the context of tables.
bottom
The bottom of the element’s box is aligned with the bottom of the line box, in the context of inline
content, or with the bottom of the table cell in the context of tables.
text-bottom
The bottom of the element’s box is aligned with the bottom of the lowest inline box in the line.
The baseline of the element is raised or lowered by the given percentage of the value for the property
line-height. Thus, a vertical-align value of 50% on a line which has a line-height of 18px
will raise the baseline by 9 pixels. A percentage value of 0% for this property has the same effect as the
value baseline.
The baseline of the element is raised or lowered by the given length value. Negative length values are
permitted for this property. A length value of 0 for this property has the same effect as the value
baseline.
Note See the section on inline formatting in Chapter 1 for more details on the
differences between line boxes, inline boxes, and the baseline.
Support for vertical-align is less than exemplary in current Web browsers. Only with the advent of
browsers such as Internet Explorer 5 for Macintosh and Opera 4 have Web browsers truly supported
the behavior described in the CSS specification. Older browsers may evidence unexpected behaviors,
generally in the form of misaligning elements. In most cases, there is minimal impact on the layout
(something which the author will tolerate), but attempts at extreme typographic effects may be thwarted
by browser limitations.
Examples
sup {vertical-align: superscript; font-size: 80%;}
td div {vertical-align: middle;}
img.textdec {vertical-align: bottom;}
span.drop {vertical-align: text-bottom;}
Related Properties
line-height
visibility
visibility determines whether an element is invisible or not.
Summary
Value Syntax
visible | hidden | collapse | inherit
Initial Value
inherit
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
120
all elements
Media Groups
visual
Values
visible
The element is visible.
hidden
The element is invisible (i.e., completely transparent). The element still exists, so it still affects the
document’s layout. The visual effect will be that of a blank spot exactly the same size that the visible
element would occupy, including any borders or margins.
collapse
This value causes columns, rows, columns groups, and row groups to be removed from the document,
but still affects the layout of the table. Thus, any cells within those rows will affect the widths of columns
in the visible portion of the table.
Note The descendant elements of an invisible element may be made visible by setting
them to visibility: visible.
This property is often used in “dynamic pages” to accomplish such effects as pop-up menus.
Examples
p.glass {visibility: hidden;}
tr.stow {visibility: collapse;}
Related Properties
display
white-space
white-space is used to alter the user agent’s handling of whitespace in an element.
Summary
Value Syntax
normal | pre | nowrap | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual
Values
normal
Any sequence of whitespaces within the element is converted to a single space. This is familiar
behavior from traditional Web browsers.
pre
Cascading Style Sheets 2.0
121
All whitespace in the element is honored, including multiple spaces and carriage returns. Word
wrapping is disabled, and lines are only broken at newline characters in the source, or \A sequence in
generated content.
nowrap
Any sequence of whitespaces within the element is converted to a single space, but word wrapping is
disabled. Line breaks in the source are ignored, and only the \A sequence in generated content will
start a new line of text.
Note Although the value nowrap is fairly well supported in modern browsers, pre is not.
Examples
div.poem {white-space: pre;}
p {white-space: normal;}
td.single {white-space: nowrap;}
No comments:
Post a Comment