Applies to
all elements, but see notes
Media Groups
visual
Values
ltr
The text is written left-to-right.
rtl
The text is written right-to-left.
Note direction will affect not only the writing direction of text, but also the order in which
table columns are laid out and the direction in which content will horizontally
overflow an element’s content area. It also determines the placement of a partial
line at the end of an element which has been set to text-align: justify.
Although direction can be applied to any element, it will have an effect on inline elements only if the
property unicode-bidi is set to embed or bidi-override.
Examples
*:lang(en) {direction: ltr;}
p.hebrew {direction: rtl;}
Related Properties
unicode-bidi
Cascading Style Sheets 2.0
69
display
display affects the most basic presentation of an element, effectively classing the element as a
certain type of element. The rendering of the element may depend heavily on its display type, and
certain properties will only work on elements that have specific display values.
Summary
Value Syntax
inline | block | list-item | run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group |
table-column | table-cell | table-caption | none | inherit
Initial Value
inline
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
all
Values
inline
This value causes an element to generate an inline-level box; for example, the HTML elements
STRONG, CODE, or EM (among others). The element will generate one or more inline boxes when it is
displayed.
block
This value causes an element to generate a block-level box; for example, the HTML elements P, H1, or
PRE (among others). The element will generate a block box when it is displayed.
list-item
This value causes an element to generate both a block box and a list-item inline box. Under HTML, the
LI element is the only example of such an element.
run-in
Under certain conditions, this value will cause the element to be “inserted” into the beginning of the
following element. If an element A is set to display: run-in and is followed by a block-level element
B, then A becomes the first inline-level box of B. If the element following A is not block-level, then A
becomes a block-level box.
compact
Under certain conditions, this value will cause the element to be placed to one side of the following
element. If an element A is set to display: compact and is followed by a block-level element B, and
B is neither floated nor absolutely positioned, then A is formatted as a single-line inline box. If A cannot
be formatted as a single line, it becomes a block-level box. If A can be formatted in a single line, its
width is compared to the width of the margin to one side of B; the margin chosen (right or left) is
determined by the value of the property direction for element B. If the width of A is less than the
width of the chosen margin, then it is placed within that margin, with the baseline of element A aligned
with the baseline in the first line of element B. The height of A will affect the height of the first line in
element B. If A cannot fit into the chosen margin, then A becomes a block-level box.
marker
This value will set generated content to be a marker; thus, it should be used only in conjunction with the
:before and :after pseudo- elements when they are set on block-level elements. In all other cases,
marker is treated as inline. Markers are placed in the margin of the associated element, but can
overlap the content of the element with which they are associated. Thus, authors should set a width on
the marker box, and also set the left or right margin of the element such that it will be wide enough to
contain the marker without overlap. If the marker’s width is set to auto, then its width is that of its
Cascading Style Sheets 2.0
70
content. If the width of the marker is too small to dis- play all of the content, the overflow of the content
is controlled by the value for overflow. The height of a marker box is set using the property lineheight,
not height. The distance between the marker and the main element (which is known as the
principal box) is controlled by the property marker-offset. For markers placed before the principal
box, the baseline of the marker is vertically aligned with the baseline of the first line in the principal box.
Similarly, for markers placed after the principal box, the baselines of the marker and the last line in the
principal box are vertically aligned. If the principal box does not contain any text, then the bottom outer
edge of the trailing marker is aligned with the bottom edge of the principal box’s bottom outer edge.
Finally, a marker box will be created only if the value of the property content actually generates any
content to be displayed.
table
This value causes an element to generate a block-level table box. This is analogous to the HTML
element TABLE.
inline-table
This value causes an element to generate an inline-level table box. While there is no analogue in HTML,
it can be envisioned as a traditional HTML table which can appear in the middle of a line of text.
table-cell
This value declares the element to be a table cell. This is analogous to the HTML element TD.
table-row
This value declares the element to be a row of table cells. This is analogous to the HTML element TR.
table-row-group
This value declares the element to be a group of table rows. This is analogous to the HTML element
TBODY.
table-column
This value declares the element to be a column of table cells. This is analogous to the HTML element
COL.
table-column-group
This value declares the element to be a group of table columns. This is analogous to the HTML element
COLGROUP.
table-header-group
This value declares the element to be a group of cells which is always visible at the top of the table,
placed before any row or row-groups but after any top-aligned table captions. In paged media, the user
agent may place the contents of this element at the top of each page which the table spans. This is
analogous to the HTML element THEAD.
table-footer-group
This value declares the element to be a group of cells which is always visible at the bottom of the table,
placed after any row or row-groups but before any bottom-aligned table captions. In paged media, the
user agent may place the contents of this element at the bottom of each page which the table spans.
This is analogous to the HTML element TFOOT.
table-caption
This value declares the element to be a caption for a table. This is analogous to the HTML element
CAPTION.
none
The element will generate no boxes at all, and thus will neither be displayed nor impact the layout of the
document. Any descendant elements will also be prevented from appearing, regardless of the value of
display for those elements.
Note The default value of inline is new to CSS2. Under CSS1, the default value was
block, but this made a lot of people very angry and was widely regarded as a bad
move.
display can be used to affect aural rendering of a document; see the entry on speak in Chapter 6 for
more details.
Authors are urged to use extreme caution when using display in a document language which already
has a strong display hierarchy, such as HTML. Considerable havoc could result from setting all
elements to be block, for example; declaring everything to be inline could be just as bad. On the
other hand, in a language like XML which has no predefined display semantics, use of display is a
matter of necessity.
Examples
img.illus {display: block;}
Cascading Style Sheets 2.0
71
li {display: list-item;}
h3 {display: run-in;}
{display: inline;}
Related Properties
visibility
empty-cells
empty-cells is used in the separate-border table layout model to control the rendering of table cells
which have no visible content.
Summary
Value Syntax
show | hide | inherit
Initial Value
show
Percentages
n/a
Inherited
yes
Applies to
elements with a display of table-cell
Media Groups
visual
Values
show
The borders of an empty cell are rendered.
hide
The borders of an empty cell are not drawn.
Note A cell is considered to be empty if it has no visible content. This can apply to cells
which are devoid of content, cells which contain content that has been made
invisible with the property visibility, and elements which have been suppressed
with the use of the property display. Visible content is any content which is drawn
within the cell, the non-breaking space entity ( ), and any other whitespace
besides the carriage-return, linefeed, tab, and space characters (ASCII codes
\0D, \0A, \09, and \20, respectively).
empty-cells will be honored only when the property border-collapse is set to separate. If
border-collapse is set to collapse, then empty-cells (and any associated values) will be
ignored.
Examples
table.wide {border-collapse: separate; empty-cells: show;}
td.blank {empty-cells: hide;}
Related Properties
border-collapse
float
float causes an element to be moved to one side of the parent element’s content area, which allows
other content to flow around it.
Cascading Style Sheets 2.0
72
Summary
Value Syntax
left | right | none | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all but positioned elements and generated content
Media Groups
visual
Values
left
The element is floated to the left side of its parent element’s content area. Following content will flow
around the floated element to the right.
right
The element is floated to the right side of its parent element’s content area. Following content will flow
around the floated element to the left.
none
The element is not floated.
Note For the rules which govern floating behavior, please see Chapter 1. Under CSS2,
positioned elements and generated content cannot be floated.
An image which has been floated will retain its intrinsic width. Text elements, however, should have a
value assigned for width; otherwise, results can be unpredictable. According to the CSS2
specification, the width of floated text elements will tend toward zero unless some explicit width has
been assigned. Thus, a floated text element with no assigned width could be as narrow as a single
character wide, or perhaps the width of the longest word within the element. Since there is no precisely
defined behavior in such a case, each user agent will likely differ from every other user agent. In order
to avoid uncertainty, authors should be careful to ensure that floated text elements have a declared
width.
In effect, floating an element causes it to reset its display to block, regardless of its original display
level. The only exception is if the original display was none, in which case the element will still not be
rendered, and float will have no effect.
While the content of following elements flows around the floated element, the element boxes of those
following elements will stretch under the floated element. In other words, while the foreground is
reflowed to avoid overwriting the float, the background will “slide under” the float. This is necessary to
avoid non-rectangular back- grounds, in the case of an element whose top is at the middle of a float, but
whose height is such that some of its content flows beneath the float. The unwelcome side effect is that
any element which is completely next to a float, and which also has a visible background, will have its
background drawn under the float. This is also true of any borders which are set on elements next to
floats. If authors wish to ensure that visible backgrounds and borders are not drawn under floats, they
should be sure to set the property clear to move said elements below any floated element.
Support for float exists in all CSS-aware browsers, but unfortunately it is also the property most
plagued by bugs. Floating text elements is one sore point, and so is floating elements within other
floated elements, as well as floating within tables. Authors are urged to undertake extra browser testing
when using float.
Examples
img.figure {float: right;}
p.aside {float: left; width: 25%;}
Cascading Style Sheets 2.0
73
Related Properties
clear, width
font
font is a shorthand property used to affect the rendering of text.
Summary
Value Syntax
[ [
[ /
message-box | small-caption | status-bar |
inherit
Initial Value
not defined for shorthand properties
Percentages
allowed on
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
Any permitted value for the property font-style (see font-style for more details).
Any permitted value for the property font-variant (see font-variant for more details).
Any permitted value for the property font-weight (see font-weight for more details).
Any permitted value for the property font-size (see font-size for more details).
Any permitted value for the property line-height (see line-height for more details).
Any permitted value for the property font-family (see font-family for more details).
caption
The font used by the operating system for captioned controls (e.g., buttons and drop-down menus). This
is one of the “system font” values.
icon
The font used by the operating system to label icons. This is one of the “system font” values.
menu
The font used by the operating system in menus (e.g., drop-down menus and menu lists). This is one of
the “system font” values.
message-box
The font used by the operating system within dialog boxes (e.g., warning dialogs). This is one of the
“system font” values.
small-caption
The font used by the operating system to label small controls. This is one of the “system font” values.
status-bar
Cascading Style Sheets 2.0
74
The font used by the operating system in window status bars. This is one of the “system font” values.
Note System font keywords must be declared alone. If the author wishes to change the
appearance of the element’s text when employing a system font, this must be
done with the more specific font properties (e.g., font-size).
If the author does use a system font keyword, then the bare minimum value for font is the
and
include a
in that order.
Any keyword values which are not given in the font declaration cause the corresponding properties to
be reset to their default values. Thus, if the keyword
font-style is set to its default value, normal. The properties font-size-adjust and fontstretch
cannot be provided in a font declaration, and must be declared separately. However, use of
the property font will still reset the values of font-size-adjust and font-stretch to their
defaults.
The “system font” values are not well supported as of this writing, but this is expected to change rapidly.
One area to watch is support for line-height (see the entry later in this chapter for more details).
Examples
h1 {font: bold italic small-caps 250%/1.2 sans-serif;}
pre {font: 1em Courier, "Courier New", Mishawka, monospace;}
div.footer {font: italic smaller/0.8em Times, TimesNR, serif;}
div.dialog {font: message-box;}
Related Properties
font-family, font-size, font-style, font-variant,
font-weight, line-height
font-family
font-family allows the author to provide a comma-separated list of specific font families, plus a
generic type of font family, to be used in the rendering of an element’s text.
Summary
Value Syntax
[[
[
Initial Value
UA dependent
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
The name of a specific font (e.g., Times, Helvetica, or Arial). Font names which contain whitespace
should be quoted, using either single- or double-quotation marks. If the font name is not quoted, then
any sequence of whitespace characters within the font name will be converted to a single space, and
Cascading Style Sheets 2.0
75
any leading or trailing whitespace in the font name will be ignored. Technically, font names which do not
contain whitespace can be quoted, but this is not recommended, as it can confuse some user agents.
One of five defined generic font family keywords: serif, sans-serif, monospace, cursive, and
fantasy. The generic-family keywords cannot be quoted. The user agent must maintain a list of
specific fonts for each generic family, and will select a font for use from among that list. Of the five
generic-family keywords, two are problematic: cursive and fantasy. Because most cursive fonts
render fairly badly on computer monitors, many systems do not have any cursive fonts available. Even if
a cursive font is available, it will generally make the document’s legibility very poor, so caution should be
used in the employment of cursive fonts. On the other side of the coin, fantasy tends to mean "any
font which does not fit into the other four generic families." The potentially infinite variability of fantasy
fonts—some may be "symbol" or "dingbat" fonts, while others may represent invented languages such
as Klingon, and still others may simply be too "arty" to read— means that no two systems are likely to
map fantasy to the same font. (This problem exists, to a lesser degree, with cursive fonts, which tend
to be very different from one another.) These factors make fantasy almost unusable in the real world,
and extreme caution should be exercised in its use.
Note See Chapter 1 for more details on font selection in CSS.
When rendering an element’s text, the user agent will attempt to use the fonts in the order in which they
are provided. Thus, given the value Times, Adams, serif, a user agent will first attempt to use
Times. If Times is not available, or if it does not contain the needed character, then the user agent will
attempt to use Adams. If Adams is either unsuitable or unavailable, then the user agent will go to the
last entry on the list, which directs it to use any available serif font. If the generic family has been
omitted from the value, then the user agent would have been forced to use its default font (generally set
by the user in a preferences dialog). Note that specific fonts do not have to fall into the same generic
family. It is perfectly legal to specify Times, Helvetica, Courier, and "Minion Web" in the same fontfamily
value.
Because of the possibility that a given user agent will not have the specific fonts requested, authors are
strongly encouraged to provide a last-ditch fallback in the form of a generic-family keyword at the end of
every font-family value.
It is possible to place generic-family keywords at any point in a font-family value. However, since
the presence of a generic-family keyword will often lead to the selection of some available font, any
specific fonts listed after a generic-family keyword will likely never be chosen. It can be useful to provide
multiple generic-family keywords at the end of a font-family value, especially if the preferred generic
family is an uncommon type such as cursive.
Examples
h1 {font-family: Helvetica, Arial, Verdana, sans-serif;}
pre {font-family: monospace;}
p {font-family: Times, "Times New Roman", TimesNR,
"New Century Schoolbook", serif;}
div.signature {font-family: "Meyer Light", cursive, serif;}
Related Properties
font
font-size
font-size affects the size of an element’s text.
Summary
Value Syntax
xx-small | x-small | small | medium | large | x-large | xx-large |
larger | smaller |
inherit
Initial Value
medium
Percentages
Cascading Style Sheets 2.0
76
refer to parent element’s font size
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
xx-small
Sets the element’s text to be a size smaller than that which results from the value x-small. The exact
size is not defined by CSS.
x-small
Sets the element’s text to be a size smaller than that which results from the value small. The exact
size is not defined by CSS.
small
Sets the element’s text to be a size smaller than that which results from the value medium. The exact
size is not defined by CSS.
medium
Sets the element’s text to be a size smaller than that which results from the value large, and larger
than that which results from the value small. The exact size is not defined by CSS.
large
Sets the element’s text to be a size larger than that which results from the value medium. The exact
size is not defined by CSS, although medium text should be equivalent to the user’s default setting (for
example, the size of unstyled paragraph text).
x-large
Sets the element’s text to be a size larger than that which results from the value large. The exact size
is not defined by CSS.
xx-large
Sets the element’s text to be a size larger than that which results from the value x-large. The exact
size is not defined by CSS.
larger
Sets the element’s text to be larger than that of its parent. This is accomplished by using the absolutesize
scaling factor (see notes) to increase the size of the text.
smaller
Sets the element’s text to be smaller than that of its parent. This is accomplished by using the absolutesize
scaling factor (see notes) to decrease the size of the text.
Any permitted length value. Negative length values are not permitted for font-size.
Sets the element’s text size relative to that of its parent. For example, font-size: 50% will make the
element’s text half the size of its parent element’s text. The resulting value of font-size for a
percentage calculation is actually the computed font-size which results from the calculation. Thus, if an
element’s font is set to a percentage and is calculated to be seven pixels tall, then its font-size is set to
7px, and it is this value which is inherited by any descendant elements.
Note In order to increase the robustness and scalability of styles, authors are
encouraged to use percentages and em lengths in their stylesheets. Since these
values will set font-size in relation to the default font size (or other elements), they
are vastly preferable to absolute-length units such as points. Furthermore, setting
common elements (such as BODY or P) to a font-size less than 1em (or 100%) is
discouraged, as this will make most text smaller than the user’s default setting. In
many cases, this will make the text too small for comfortable reading.
The computed font-size values of the absolute-size keywords xx-small through xx-large are not
precisely defined, but they do have a known relationship to one another. These values relate to one
another via a scaling factor internal to the user agent. CSS1 suggested a factor of 1.5, but CSS2
changed this to 1.2; however, user agents are not required to use any particular scaling factor. In fact,
different fonts may have different scaling factors.
Cascading Style Sheets 2.0
77
In any case, adjacent keywords in the progression will have the same size relationship. This relationship
is controlled by the scaling factor. For example, assume that medium is equivalent to 10pt. Given a
scaling factor of 1.2, then large would be equivalent to 12pt, x-large to 14.4pt (12 times 1.2), and
so on. Similarly, small would be equivalent to 8.33pt (10 divided by 1.2), x-small to 6.94pt, and
so on.
While user agents might be expected to recompute the actual sizes of these keywords if the user
changes the default font size, in practice most do not. Instead, they assign unchanging font sizes to the
absolute-size keywords.
Despite what one might expect, providing a length value for font-size may not guarantee the actual
size of the font. This can occur for a number of reasons.
First, the value of font-size is actually setting the height of the character box for each character
which is displayed, not the height of the character glyph itself. Since font character glyphs are rarely
exactly the same height as their character boxes, the actual measured size of the character glyph may
not precisely match the value given for font-size. In most cases, the actual height of the characters
will be less than the font-size value, but in some cases they may be taller.
If the preferred font is not available, and a value has been given for the property font-size-adjust,
then the actual font-size of the font used may be different than that which the author has specified.
In addition, the user agent may maintain bounds past which it will not allow the computed value of
font-size to go. In most cases, this will be to prevent fonts from becoming too small to read, but
upper font-size bounds may also be enforced.
Finally, user agents may provide the user with the ability to alter font sizes, regardless of how the author
sets them. These range from user stylesheets to interface features like “Text Zoom” in Internet Explorer
5 for the Macintosh, or the “Page Zoom” found in Opera.
Examples
h1 {font-size: 225%;}
div.legal {font-size: 0.75em;}
Related Properties
font, font-size-adjust
font-size-adjust
font-size-adjust can be used to improve the legibility of alternate font choices.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
The aspect value of the first font listed in the value of the property font-family. This value is used in
the equation fs x (fa/aa) = as, where fs is the declared value of font-size for the element, fa is the
Cascading Style Sheets 2.0
78
declared value of font-size-adjust, aa is the aspect value of the actual font to be used, and as is
the computed font-size for the element.
none
No size adjustments should be made to alternate font choices.
Note Although font-size-adjust cannot be set as a keyword of the property font, its
value will be reset to none for an element if font is also declared for that element.
Thus, any element which uses both font and font-size-adjust must have the
properties in that order: font first, and font-size-adjust second.
In order to understand font-size-adjust a little better, let us consider a hypothetical example.
Suppose that an author declares that an element should use (in order of preference) the fonts "Kathryn
Light" and "Meyer Web." The aspect value of Kathryn Light, which is the ratio of the x-height to the
height of its character box, is 0.42. Knowing this, the page author sets font-size-adjust to 0.42
and also declares the element’s font-size to be 18px.
A user views the page with a system that does not have Kathryn Light, but does have Meyer Web. The
aspect value for Meyer Web is 0.42. The user agent then performs the following calculation: 18px times
(0.42/0.23) = 32.87px. This will be the font-size used to display the element using Meyer Web.
Although this may seem like an enormous difference, the legibility of the element’s text will be
approximately the same as if it had used the first-choice font. Without this size adjustment, the
element’s text would be very difficult to read using Meyer Web.
In practice, this property is rarely used and even less often supported.
Examples
p.sig {font: 125% Author, Braggadaccio, cursive;
font-size-adjust: 0.33;}
h1 {font-family: Verdana, sans-serif; font-size-adjust: 0.58;}
Related Properties
font, font-size
font-stretch
font-stretch makes text characters wider or narrower than the font’s default character width.
Summary
Value Syntax
normal | wider | narrower | ultra-condensed |
extra-condensed | condensed | semi-condensed | semi-expanded |
expanded | extra-expanded | ultra-expanded | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
ultra-condensed
Cascading Style Sheets 2.0
79
The text characters in the element will be narrowed extremely, rendering them narrower than if the
value were extra-condensed. CSS does not specify how this is accomplished, nor does it point out
the mechanism for calculating the final character width.
extra-condensed
The text characters in the element will be narrowed significantly, making them narrower than if the value
were condensed. CSS does not specify how this is accomplished, nor does it reveal the mechanism
for calculating the final character width.
condensed
The text characters in the element will be narrowed, more so than if the value were semi-condensed.
CSS does not specify how this is accomplished, nor does it disclose the mechanism for calculating the
final character width.
semi-condensed
The text characters in the element will be slightly narrowed, making them narrower than if the value
were normal. CSS does not specify how this is accomplished, nor does it explain the mechanism by
which the final character width is calculated.
normal
The text characters in the element are of normal width.
semi-expanded
The text characters in the element will be slightly widened, making them wider than if the value were
normal. CSS does not specify how this is accomplished, nor does it show the mechanism for
calculating the final character width.
expanded
The text characters in the element will be widened, making them wider than if the value were semiexpanded.
CSS does not specify how this is accomplished, nor does it present the mechanism for
calculating the final character width.
extra-expanded
The text characters in the element will be widened greatly, making them wider than if the value were
expanded. CSS does not specify how this is accomplished, nor does it explain the mechanism for
calculating the final character width.
ultra-expanded
The text characters in the element will be widened extremely, making them wider than if the value were
extra-expanded. CSS does not specify how this is accomplished, nor does it divulge the mechanism
for calculating the final character width.
wider
The width of text characters in the element will be wider than those of their parent element. In effect, this
moves the font-stretch value up one notch in the list of keywords above, so that if the parent
element’s font-stretch is semi-expanded, then the element’s value will be expanded. The value
cannot be increased past ultra-expanded.
narrower
The width of text characters in the element will be narrower than those of their parent element. In effect,
this moves the font-stretch value down one notch in the list of keywords above, so that if the parent
element’s font-stretch is normal, then the element’s value will be semi-condensed. The value
cannot be increased past ultra-condensed.
Note Although font-stretch cannot be set as a keyword of the property font, its value
will be reset to none for an element if font is also declared for that element. Thus,
any element which uses both font and font-stretch must have the properties in
that order: font first, and font-stretch second.
In practice, this property is rarely used and even less often supported.
Examples
em {font-stretch: extra-expanded;}
div.narrow {font-stretch: ultra-condensed;}
p {font-stretch: normal;}
Related Properties
font
Cascading Style Sheets 2.0
80
font-style
font-style determines the use of one of three font faces to be used in the rendering of a given
element’s text.
Summary
Value Syntax
normal | italic | oblique | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
Specifies a normal font face; that is, whatever is the default face for the font in use. In most fonts, this
results in an upright font.
italic
Specifies an italic font face; that is, one which is slanted and in which the characters have been
modified to improve legibility in their slanted state. These are often referred to as Cursive or Italic faces.
If no italic font face is available, the user agent may select one which is labeled “oblique.”
oblique
Specifies an oblique font face; that is, one which is slanted. These are often referred to as Oblique or
Incline faces. In many cases, an oblique face is simply a normal face which has been computationally
slanted.
Note As of this writing, there is no visual difference between the values italic and
oblique in Web browsers. This makes the value oblique fairly unnecessary, but in
the future better support in Web browsers may bring oblique back into common
usage.
Examples
p.slant {font-style: oblique;}
blockquote {font-style: italic;}
blockquote em {font-style: normal;}
Related Properties
font
font-variant
font-variant determines the use of one of two font faces to be used in the rendering of a given
element’s text.
Summary
Value Syntax
normal | small-caps | inherit
Initial Value
normal
Cascading Style Sheets 2.0
81
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
Specifies a normal font face; that is, whatever is the default face for the font in use. In the context of this
property, this value effectively means that the font should not be small-caps.
small-caps
Specifies a small-caps face; that is, a face in which lowercase characters are rendered as capital letters
which are smaller than the letters used for uppercase characters. If no such face is available, the user
agent may simulate one by computationally scaling capital letters to get the desired effect.
Note Since lowercase characters in a small-caps font are rendered as capital letters of
reduced size, they may suffer from reduced legibility as well. For example, a
small-caps font in which the uppercase characters are 12 pixels tall (due to the
rule font-size: 12px, perhaps) may use 10-pixel-tall capitals for lowercase
characters.
Under CSS2, user agents are allowed to simulate the small-caps effect by rendering all text in capital
letters of the same size. Although this is visually indistinguishable from text-transform:
uppercase, it is permitted behavior. Internet Explorer 5.x for Windows takes this approach.
It is possible that future versions of CSS will permit other variant types, but the specification does not
hint at what these might be.
Examples
h1 {font-variant: small-caps;}
p {font-variant: normal;}
Related Properties
font
font-weight
font-weight alters the visual weight of characters in an element.
Summary
Value Syntax
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900 | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
Cascading Style Sheets 2.0
82
all elements
Media Groups
visual
Values
100
The font’s characters should be lighter than those characters which result from a value of 200, or at a
minimum have the same weight.
200
The font’s characters should be at least as heavy as those characters which result from a value of 100,
and should be heavier if possible.
300
The font’s characters should be at least as heavy as those characters which result from a value of 200,
and should be heavier if possible.
400
The font’s characters should be at least as heavy as those characters which result from a value of 300,
and should be heavier if possible.
500
The font’s characters should be at least as heavy as those characters which result from a value of 400,
and should be heavier if possible.
600
The font’s characters should be at least as heavy as those characters which result from a value of 500,
and should be heavier if possible.
700
The font’s characters should be at least as heavy as those characters which result from a value of 600,
and should be heavier if possible.
800
The font’s characters should be at least as heavy as those characters which result from a value of 700,
and should be heavier if possible.
900
The font’s characters should be at least as heavy as those characters which result from a value of 800,
and should be heavier if possible.
normal
Equivalent to the value 400.
bold
Equivalent to the value 700.
bolder
The font characters for the element should be heavier than those of the parent element. If there is a
heavier font face available, use it; otherwise, increase the numeric keyword level by one. For example, if
an element’s parent has a weight of 400, and the element is set to bolder, then its weight will be 500
(assuming there is a heavier font face available). This may or may not have a visible effect. The weight
of a font cannot be increased above 900.
lighter
The font characters for the element should be lighter than those of the parent element. If there is a
lighter font face available, use it; otherwise, decrease the numeric keyword level by one. For example, if
an element’s parent has a weight of 400, and the element is set to lighter, then its weight will be 300
(assuming there is a heavier font face available). This may or may not have a visible effect. The weight
of a font cannot be decreased below 100.
Note See the section on font rules in Chapter 1 for more details on font-weight
assignment.
At sufficiently small font sizes, characters will be too small to show the effects of weighting. For
example, with text eight pixels tall, there is little or no visual difference between normal and boldface
text. This is due to the loss of legibility involved in boldfacing characters whose lines are only one or two
pixels apart, and which are one pixel wide. Even though a piece of small text doesn’t look heavy, it may
in fact be as bold as possible, and many authors mistake the lack of visual change as a bug or an
instance of missing support. In fact, it is a reflection of the limitations imposed by modern display
environments.
Cascading Style Sheets 2.0
83
In practice, a font will generally have at least two faces which the user agent recognizes: normal and
bold. Some fonts may also contain light faces, but it is not certain that a user agent will recognize and
use these faces.
Examples
strong {font-weight: bold;}
a:link, a:visited {font-weight: bolder;}
h3 {font-weight: 900;}
Related Properties
font
height
height defines the vertical distance between the top and bottom edges of the element’s content area.
Summary
Value Syntax
Initial Value
auto
Percentages
see “Values”
Inherited
no
Applies to
all elements except non-replaced inline elements, table columns, and column groups
Media Groups
visual
Values
Any length unit. Negative length values are not permitted for this property.
The height is calculated with respect to the height of the element’s containing block, assuming that the
containing block’s height has been explicitly set. If not, then a percentage value is treated as auto.
auto
The result of this value depends on a number of factors. In the normal document flow, auto will result in
whatever height is necessary to enclose the content of the element. In positioned elements, it may have
the same effect, or it may be overridden due to constraints introduced using properties such as top and
bottom. See the section on positioning rules in Chapter 1 for more details.
Note If the height of a replaced element (e.g., an image) is set to a length unit, and no
width is set, then the image will be scaled so that its height matches the declared
value, and the width is altered by the same proportion. For example, an image
100 pixels tall and 50 pixels wide is set to height: 200px; thus its width will be
increased to 100 pixels. Setting the height of a replaced element to a percentage
will operate as described above, and make the height of the element some
percentage of the height of its containing block. It is not possible to reduce an
element to half its intrinsic size through a percentage value.
Examples
div.nav {position: fixed; top: 0; height: 15%;}
img.pic {height: 200px;}
Cascading Style Sheets 2.0
84
select {height: 0.9em;}
Related Properties
bottom, margin-bottom, margin-top, padding-bottom, padding-top, top, width
left
left defines an offset of the left edge of an absolutely positioned element from the left 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 left is treated as though it were auto. In
practice, this means that percentage values for left 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
horizontal distance besides left 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
right-to-left writing modes such as Hebrew, if all of the horizontal dimensions
including left are explicitly set, but do not add up to the width of the positioning
context, then the value for left is discarded, and the necessary value is
substituted. In both cases, a negative distance may be assigned to left. If left is
set to auto in left-to-right writing modes such as English, then the left 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 left 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, left defines a horizontal offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for left will offset the
element to the right, and negative values will move it to the left. In left-to-right writing modes such as
English, if both right and left are set to explicit values, then the value for right will be discarded in
favor of left.
Cascading Style Sheets 2.0
85
Examples
div.sidebar {position: absolute; width: auto;
left: 10%; right: 50%;}
em.slide-left { position: relative; left: -1em;}
Related Properties
bottom, position, right, top, width
letter-spacing
letter-spacing modifies the amount of space placed between adjacent characters.
Summary
Value Syntax
normal |
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
The default spacing between letters is not changed. In practice, this is equivalent to setting the value to
0.
This will add to the spacing between letters—the greater the length, the more space will be seen
between letters. Negative values are permitted, and will cause letters to bunch together, to the point of
potentially overwriting one another or even appearing to write text “backwards.”
Note letter-spacing is treated as a modifier because in normal layout, there is no space
between character boxes. The space normally seen between characters is an
artifact of intentional design, as some amount of space is intentionally left to
either side of a character glyph within its character box. This is done to prevent
the glyphs from touching each other during rendering.
In fully justified text (see text-align), the space between letters may be programmatically altered in
order to create the effect of full justification.
In order to preserve the relative spacing between characters for descendant elements, authors are
encouraged to use em length units.
Examples
em {letter-spacing: 1px;}
h1.wider {letter-spacing: 0.5em;}
p.scrunched {letter-spacing: -0.5ex;}
table {letter-spacing: normal;}
Related Properties
text-align, word-spacing
Cascading Style Sheets 2.0
86
line-height
line-height modifies the height of the inline boxes which make up a line of text.
Summary
Value Syntax
normal |
Initial Value
normal
Percentages
refer to the font size of the element itself
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
Directs the user agent to set the height of lines in the element to a “reasonable” distance. This is
recommended as a
value they choose.
The actual height of lines in the element is this value multiplied by the font-size of the element. In
addition, the numeric value, and not the computed line-height, is inherited by any descendant
elements. This allows descendants to have line-heights which are proportional to their font sizes. Use of
this value is strongly encouraged. Negative values are not permitted.
The height of lines in the element is the value given. Note that this is actually a minimum height, as
conditions within a given line may make its line-box taller than the length value given for line-height.
Negative values are not permitted.
The height of lines in the element is calculated as a percentage of the element’s font-size (not the
parent element’s font-size). Note that this is actually a minimum height, as conditions within a given
line may make its line-box taller than the length value given for line-height. Negative values are not
permitted.
Note The effects of line-height are actually far more complicated than they appear. The
value of line-height for a given element is used to derive the half-leading which is
applied to the top and bottom of each inline box in the line. These inline boxes are
what collectively make up the line box. A line box may be taller than any of its
constituent inline boxes, but it can never be shorter than the shortest inline box. It
is also possible that the line box may be shorter than the contents of the line, in
which case the contents may overlap the content of other lines. See the section
on inline formatting in Chapter 1 for more details.
Support for line-height 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 line-height described in the CSS specification. Older browsers may evidence unexpected behaviors,
generally in the form of pushing lines further apart than they should be drawn. In most cases, there is
minimal impact on the layout (something which most authors will tolerate), but attempts at extreme
typographic effects may be thwarted by browser limitations.
The height of marker boxes (see display: marker) is set using line-height.
The value of line-height can also be set as a part of the font property.
Examples
h1 {line-height: 130%;}
p {line-height: 1.1;}
Cascading Style Sheets 2.0
87
pre {font-size: 10px; line-height: 11px;}
Related Properties
font, font-size, vertical-align
list-style
list-style is a shorthand property used to set the position and type of markers in a list; it can also be
used to assign an image as the marker.
Summary
Value Syntax
[
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
yes
Applies to
elements with a display of list-item
Media Groups
visual
Values
Any permitted value for the property list-style-type.
Any permitted value for the property list-style-position.
Any permitted value for the property list-style-image.
Note
As with other shorthand properties, any unspecified keywords will reset the corresponding properties to
their default values. See the section on shorthand properties in Chapter 1 for more details.
Examples
ol li {list-style: decimal;}
ul.state li {list-style: inside url(states/new-york.png);}
Related Properties
list-style-image, list-style-position, list-style-type
list-style-image
list-style-image defines a pointer to an image resource that is to be used as the marker for list
items.
Summary
Value Syntax
Initial Value
none
Percentages
n/a
Cascading Style Sheets 2.0
88
Inherited
yes
Applies to
elements with a display of list-item
Media Groups
visual
Values
A pointer to an image resource. If the URL cannot be resolved, then the property is treated as if the
value were none.
none
No image should be used as a marker for the element.
Note Since it is not possible to affect the size of a marker image specified using liststyle-
image, authors should exercise caution to ensure that the image is not too
large for the text in the list item’s content. For more details on markers, refer to
the entry for marker in the property display.
Note that since this property is inherited, a marker image set for a list will be applied to any lists which
are descendants of the element. The only way to prevent this is to set the value of list-styleimage
for these descendant lists to none.
Examples
ul.state li {list-style-image: url(states/new-york.png);}
ul.state li ul {list-style-image: none;}
Related Properties
list-style, list-style-position, list-style-type
list-style-position
list-style-position affects the placement of a marker in relation to the content of the list item.
Summary
Value Syntax
inside | outside | inherit
Initial Value
outside
Percentages
n/a
Inherited
yes
Applies to
elements with a display of list-item
Media Groups
visual
Values
inside
The marker is made an inline element at the beginning of the first line of the list item’s content. This is
somewhat similar to the effect created by display: run-in.
outside
The marker is placed outside the box containing the list item’s content. The actual position of this
marker is not specified. For more flexible list-item markers, refer to the entry for the value marker in the
property display.
Cascading Style Sheets 2.0
89
Note Note that since this property is inherited, the marker position set for a list will be
applied to any lists which are descendants of the element. The only way to
prevent this is to set the value of list- style-position for these descendant lists to a
different value.
Examples
ul.collapse {list-style-position: inside;}
ol li {list-style-position: outside;}
Related Properties
list-style, list-style-image, list-style-type
list-style-type
list-style-type sets the counting (or bullet) style used in the marker for a list item.
Summary
Value Syntax
disc | circle | square | decimal | decimal-leading-zero | lower-roman |
upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha |
upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana |
katakana | hiragana-iroha | katakana-iroha | none | inherit
Initial Value
disc
Percentages
n/a
Inherited
yes
Applies to
elements with a display of list-item
Media Groups
visual
Values
disc
Although the exact representation of this value is not specified, most user agents render it as a filled
circle.
circle
Although the exact representation of this value is not specified, most user agents render it as an unfilled
circle.
square
Although the exact representation of this value is not specified, most user agents render it as a square
(oddly enough). However, some will fill the square, while others leave it unfilled.
decimal
Specifies a decimal counting system, beginning with 1 and proceeding to 2, 3, 4, and so on.
decimal-leading-zero
Specifies a decimal counting system, beginning with 01 and proceeding to 02, 03, 04, and so on. User
agent may fill in enough leading zeros to match the number of digits in the last item; for example, a 320-
item list might start with 001. This behavior is not required.
lower-roman
Specifies counting with lowercase roman numerals, beginning with i and proceeding to ii, iii, iv, and so
on.
upper-roman
Cascading Style Sheets 2.0
90
Specifies counting with uppercase roman numerals, beginning with I and proceeding to II, III, IV, and so
on.
lower-alpha
Specifies counting with lowercase ASCII letters, beginning with a and proceeding to b, c, d, and so on.
upper-alpha
Specifies counting with uppercase ASCII letters, beginning with A and proceeding to B, C, D, and so on.
lower-latin
Specifies counting with lowercase ASCII letters, beginning with a and proceeding to b, c, d, and so on.
upper-latin
Specifies counting with uppercase ASCII letters, beginning with A and proceeding to B, C, D, and so on.
lower-greek
Specifies counting with classical Greek letters, beginning with alpha and proceeding to beta, gamma,
delta, and so on.
hebrew
Specifies counting in traditional Hebrew.
armenian
Specifies counting in traditional Armenian.
georgian
Specifies counting in traditional Georgian.
cjk-ideographic
Specifies counting in ideographic numbers.
hiragana
Specifies counting in the Japanese hiragana system, beginning with a and proceeding to i, u, e, o, ka,
ki, and so on.
katakana
Specifies counting in the Japanese katakana system, beginning with A and proceeding to I, U, E, O, KA,
KI, and so on.
hiragana-iroha
Specifies counting in the Japanese hiragana-iroha system, beginning with i and proceeding to ro, ha, ni,
ho, and so on.
katakana-iroha
Specifies counting in the Japanese katakana-iroha system, beginning with I and proceeding to RO, HA,
NI, HO, and so on.
none
No marker should be displayed.
Note If a user agent cannot support the counting system specified, it should treat the
value as decimal. List items within an ordered list always increment the list’s
counter (see counter-increment for more details) in decimal format, with the
actual counter type being translated from decimal to the declared type. Thus, the
sixth list item in an ordered list will typically have a counter value of 6; if the
declared type is lower-alpha, then the 6 will be translated to an f. CSS does not
specify how said translations should take place, and there is no provision for
handling "wrap-around" in non-numeric counting systems. For example, the
specification does not define the next entry after "Z" in an alphabetic counting
system.
Note that the default value is disc, which applies even to list items in ordered lists. Thus, if a rule using
list-style is applied to list items in an ordered list, and the value of list-style does not contain a
list style type, the default value of disc will be used.
Note also that since this property is inherited; the marker style set for a list will be applied to any lists
which are descendants of the element. The only way to prevent this is to set the value of list-styletype
for these descendant lists to a different value.
Examples
ol.caesar {list-style-type: upper-roman;}
li.letter {list-style-type: lower-alpha;}
Cascading Style Sheets 2.0
91
Related Properties
list-style, list-style-image, list-style-position
margin
margin is a shorthand property which sets the width of the margins 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
Values
Any length value.
The margin’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).
auto
Sets the values for all four margins to be automatically calculated. This will have different meanings for
each side; for more details, refer to the individual margin properties, or the section on height and width
calculations in Chapter 1.
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 margin, the second to the left and right
margins, and the third to the bottom margin. If two values are declared, the first
applies to the top and bottom margins, while the second applies to the left and
right margins. If one value is declared, it applies to all four margins.
Vertically adjacent margins will collapse to the larger of the two. See the section on the box model in
Chapter 1 for more details.
For the effects of margins on inline elements, refer to the individual margin properties.
Examples
h1 {margin: 1.5em 5% 0.5em;}
img {margin: 10px;}
a.external:link {margin: 1em;}
Related Properties
margin-bottom, margin-left, margin-right, margin-top
margin-bottom
margin-bottom sets the width of the margin on the bottom of an element.
Cascading Style Sheets 2.0
92
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 margin’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).
auto
This value will have different effects depending on the situation. For floated elements, block-level
elements in the normal flow, relatively positioned elements, and inline-level elements, replaced or
otherwise, auto is equivalent to 0. For other circumstances, see the section on height calculations in
Chapter 1.
Note If two elements which are vertically adjacent (that is, they follow one another in
the normal flow of the document) have margins set, then the actual distance
between the two borders of the two elements is equal to the larger of the margins.
Thus, if an element with a margin-bottom of 1.5em is immediately followed by an
element with a margin-top of 1em, the distance between the borders of the two
elements will be 1.5em. See the section on the box model in Chapter 1 for more
details.
margin-bottom has no effect on non-replaced inline elements. User agents should assign the value
of margin-bottom to these elements, but since inline margins have no impact on line height
calculations, there will be no visible effect. This is not the case with replaced inline elements, which
have the bottom margin as part of their element box.
Examples
h1 {margin-bottom: 0.33em;}
table {margin-bottom: 3%;}
img.drop {margin-bottom: 12px;}
Related Properties
margin, margin-left, margin-right, margin-top
margin-left
margin-left sets the width of the margin on the left side of an element.
Summary
Value Syntax
[
Initial Value
Cascading Style Sheets 2.0
93
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values
Any length value.
The margin’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).
auto
This value will have different effects depending on the situation. For floated elements, relatively
positioned elements, and inline-level elements, replaced or otherwise, auto is equivalent to 0. For other
circumstances, see the section on width calculations in Chapter 1.
Note margin-left will have an effect on the layout of inline elements. In the case of
replaced element-like images, the margin is rendered as part of the element box.
In the case of non-replaced elements like hyperlinks, the left margin is applied to
the left side of the element. If the inline element is broken across two or more
lines, the left margin 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. Horizontally adjacent margins do not collapse; see the section on the box
model in Chapter 1 for more details.
Examples
h2 {margin-left: 25px;}
pre {margin-left: 3em;}
li {margin-left: 7%;}
Related Properties
margin, margin-bottom, margin-right, margin-top
margin-right
margin-right sets the width of the margin on the right side of an element.
Summary
Value Syntax
[
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
Cascading Style Sheets 2.0
94
all elements
Media Groups
visual
Values
Any length value.
The margin’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).
auto
This value will have different effects depending on the situation. For floated elements, relatively
positioned elements, and inline-level elements, replaced or otherwise, auto is equivalent to 0. For other
circumstances, see the section on width calculations in Chapter 1.
Note margin-right will have an effect on the layout of inline elements. In the case of
replaced element-like images, the margin is rendered as part of the element box.
In the case of non-replaced elements like hyperlinks, the right margin is applied to
the right side of the element. If the inline element is broken across two or more
lines, the right margin 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 preceding
lines. Horizontally adjacent margins do not collapse; see the section on the box
model in Chapter 1 for more details.
Examples
h3 {margin-left: 5%;}
blockquote {margin-right: 5em;}
li {margin-right: auto;}
Related Properties
margin, margin-bottom, margin-left, margin-top
margin-top
margin-top sets the width of the margin on the \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\top 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.
Cascading Style Sheets 2.0
95
The margin’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).
auto
This value will have different effects depending on the situation. For floated elements, block-level
elements in the normal flow, relatively positioned elements, and inline-level elements, replaced or
otherwise, auto is equivalent to 0. For other circumstances, see the section on height calculations in
Chapter 1.
Note If two elements which are vertically adjacent (that is, they follow one another in
the normal flow of the document) have margins set, then the actual distance
between the two borders of the two elements is equal to the larger of the margins.
Thus, if an element with a margin-top of 1.75em is immediately preceded by an
element with a margin-bottom of 1em, the distance between the borders of the
two elements will be 1.75em. See the section on the box model in Chapter 1 for
more details.
margin-top has no visible effect on non-replaced inline elements. User agents should assign the
value of margin-top to these elements, but since inline margins have no impact on line height
calculations, there will be no visible effect. This is not the case with replaced inline elements, which
render the top margin as part of their element box.
No comments:
Post a Comment