Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
In addition to font selection, CSS has a number of other properties for controlling the presentation of text.
The line-height property controls the
“leading,” that is, the vertical distance
between the baselines of two adjacent lines.
The property can take any of these values:
normal: Set the line height to the
default size.
A number (with or without a decimal) to specify the
multiple of normal line height. For example, line-height: 2 specifies
double-spacing; line-height: 1.2
would give you 20% more than normal spacing.
A number followed by a percent sign gives you that
percent of the normal leading. For example, line-height: 150% specifies 1.5 times
the normal leading.
A dimension (see Section 6.1, “Dimensions”) sets
the leading to that dimension. For example, line-height: 12pt gives you 12-point
leading.
Use the text-indent property to control
the indentation of text paragraphs (and text in block
elements generally). You can use two kinds of values for
this property:
Use a dimension (see Section 6.1, “Dimensions”) to specify the size of the indentation directly.
A number followed by a percent sign sets the indent
size to that percentage of the width of the
browser window. For example, text-indent: 10% specifies that
paragraphs should be indented one tenth of the width
of the browser window.
Normally, text is set “ragged right”, with a
straight left margin. You can get different paragraph
shapes by setting the text-align property
to one of these values:
left for a straight left margin and a
ragged right margin, the default appearance;
center to set the text with both left
and right margins ragged;
right for straight right and ragged
left margins; or
justify for straight left and right
margins.
This property is used to add certain effects to text:
underline adds an underline below the
text.
overline places a line over the text.
line-through sets the text in
“strike-out” type, with a line through
the text. This style is often used to show that is
being deleted in a particular revision.
blink makes the text blink on a Web
page. This effect can be extremely annoying and
should be used sparingly, if at all.
These properties can change the case of text:
The capitalize value
capitalizes the first letter of each word.
The uppercase value changes
all letters to capitals.
The lowercase value changes all
letters to lowercase.
You can control how white space (spaces and tab
characters) are treated by setting the white-space property to one of these values:
normal treats whitespace in the usual
way for its enclosing element.
nowrap collapses each region of
whitespace within a line to a single space and
ignores line breaks, setting the entire content as
one long line.
pre treats text as in the pre element: all
whitespace and line breaks are displayed exactly as
they appear in the HTML source file.
For extra emphasis, you can use the
letter-spacing property
to display text with extra spaces between the letters. The
value can be:
normal: this cancels any
letter-spacing.
A dimension (see Section 6.1, “Dimensions”) that says how much extra space you want between letters.
For example, this rule:
h1.shout { letter-spacing: 1pt; }
would add one point of horizontal space between the
letters of any heading element <h1 class='shout'>…<h1>.
Use the word-spacing property to get extra
spacing between words. Values can be:
normal: this cancels any word-spacing.
A dimension (see Section 6.1, “Dimensions”) that says how much extra space you want between words.
This property allows you to shift text vertically relative to its normal baseline. Values may be any of:
baseline
This text's baseline is the same as the baseline of the block that contains it. This is the default value.
middle
The vertical center of this text is aligned with the center of the containing block. The center of a line of text is above the baseline by an amount half the x-height of the text. The x-height of a font is the height of a character with no ascenders or descenders, such as “x”.
sub
Shift this text down as if it were a subscript. Note that this does not change the size of the text.
super
Shift this text up as if it were a superscript. This property does not change the size of the text.
text-top
The top of this text will be vertically aligned with the top of text in the containing block.
text-bottom
The bottom of this text will be vertically aligned with the bottom of text in the containing block.
int%
Raise this text an amount specified as the
percentage of the current line-height. For example, if the current line-height is 12 points, this declaration
vertical-align: 25%;
would raise the text 3 points.
dimensionRaise the text by the given dimension. For example, this declaration
vertical-align: -2mm;
would lower the text by two millimeters. See Section 6.1, “Dimensions”.
The quotes property is used to declare one
or more pairs of quote symbols to be used in setting off
quoted text. The default is to use double quotes
“…” for the first level of
quotation, and single quotes ‘…’ for
quotes within quotes.
The value for this property may be either of:
A list of character strings to be used as quote symbols. The first two strings are used as the first-level open and close quote characters. The next two characters are the second-level open and close quote characters.
The keyword none, if you don't want
any quote symbols to appear.
For example, this declaration would set up the British convention of single quotes at the outermost level and double quotes at the second level:
quotes: "'" "'" '"' '"'
The quote symbols you set up with this declaration are
invoked when the content property contains
open-quote and close-quote
values. For more on this property, see
Section 16, “The content property: Specifying
content in pseudo-elements”.