In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.
We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.
There are eight properties that can be used to control text appearance – word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. Let’s look at each of these properties in turn.
word-spacing
This property controls the amount of space added to the default spacing between each word. The allowable values are:
| Value | Example |
|---|---|
normal |
{ word-spacing: normal; } |
| length | { word-spacing: 5mm; } |
normal will select the default word spacing.
length will add the specified value to the default word spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.
Examples:
p { word-spacing: 1em; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
letter-spacing
This property is similar to word-spacing, but controls the spacing added between each individual letter. Possible values are:
| Value | Example |
|---|---|
normal |
{ letter-spacing: normal; } |
| length | { letter-spacing: 0.1mm; } |
normal will select the default letter spacing.
length will add the specified value to the default letter spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.
Examples:
p { letter-spacing: 0.1em; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
p { letter-spacing: 0.1cm; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
text-decoration
The text-decoration property allows you to control decorations that can be added to the text, such as strike-throughs, underlining, and (heaven forbid!) blinking. Possible values are:
| Value | Example |
|---|---|
none |
{ text-decoration: none; } |
underline |
{ text-decoration: underline; } |
overline |
{ text-decoration: overline; } |
line-through |
{ text-decoration: line-through; } |
blink |
{ text-decoration: blink; } |
Examples:
p { text-decoration: underline; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
p { text-decoration: line-through; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
vertical-align
This property controls the vertical placement of the text. It’s similar to the valign attribute in HTML. The allowable values are:
| Value | Example |
|---|---|
baseline |
{ vertical-align: baseline; } |
sub |
{ vertical-align: sub; } |
super |
{ vertical-align: super; } |
top |
{ vertical-align: top; } |
text-top |
{ vertical-align: text-top; } |
middle |
{ vertical-align: middle; } |
bottom |
{ vertical-align: bottom; } |
text-bottom |
{ vertical-align: text-bottom; } |
| percentage | { vertical-align: 25%; } |
The following 6 values are relative to the parent element:
baseline aligns the baseline with the parent’s baseline. This is the default.
middle aligns the vertical midpoint of the element (e.g. an image) with the baseline plus half the x-height of the parent. The x-height is the height of the letter ‘x’ in the context of this line of text. See the CSS units reference for details.
sub displays the element as subscript text.
super displays the element as superscript text.
text-top aligns the top of the element with the top of the font used for the parent element.
text-bottom aligns the bottom of the element with the bottom of the font used for the parent element.
The next two values are relative to the line that the element is in, as opposed to the parent element:
top causes the top of the element to be aligned vertically with the tallest element on the line.
bottom causes the bottom of the element to be aligned vertically with the lowest element on the line.
The final value, percentage, specifies a percentage of the element’s line height (see the line-height property below). It raises or lowers the baseline by a percentage of the line-height above the baseline of the parent. For example, a value of 50% will raise the baseline to halfway between the parent’s baseline and the baseline of the line above. A value of -100% will lower the baseline to the same height as the baseline of the line below.
Examples:
span { vertical-align: super; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
span { vertical-align: sub; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
span { vertical-align: 100%; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
text-transform
text-transform controls the case of the text. You can transform all the text into capitals or lowercase, or just capitalize the first letter of each word. The options are:
| Value | Example |
|---|---|
capitalize |
{ text-transform: capitalize; } |
uppercase |
{ text-transform: uppercase; } |
lowercase |
{ text-transform: lowercase; } |
none |
{ text-transform: none; } |
capitalize uppercases the first character of each word, while uppercase and lowercase transform the whole text into all upper-case or lower-case characters respectively. none removes all transformations from the text and displays it as-is.
Examples:
p { text-transform: uppercase; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
p { text-transform: capitalize; }
`Take some more tea,’ the March Hare said to Alice, very earnestly.
text-align
This property is similar to the align attribute in HTML. Options are:
| Value | Example |
|---|---|
left |
{ text-align: left; } |
right |
{ text-align: right; } |
center |
{ text-align: center; } |
justify |
{ text-align: justify; } |
left, right and center perform the same actions as their HTML counterparts. justify creates columns of text that are aligned along their left and right edges, like the text in a book.
Examples:
p { text-align: center; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
p { text-align: justify; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
text-indent
This property allows you to indent the first line of text in a paragraph. The options are:
| Value | Example |
|---|---|
| length | { text-indent: 3cm; } |
| percentage | { text-indent: 5% } |
A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.
percentage is a percentage of the parent element’s width.
Examples:
p { text-indent: 5em; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
line-height
The final text property, line-height, controls the distance between lines of text. Possible values are:
| Value | Example |
|---|---|
normal |
{ line-height: normal; } |
| number | { line-height: 1.5; } |
| length | { line-height: 0.5cm; } |
| percentage | { line-height: 125%; } |
normal sets the line height to the default or inherited value, while specifying a number results in a line height of the default value multiplied by that number.
A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.
percentage is a percentage of the element’s font size.
Examples:
p { line-height: normal; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
p { line-height: 2; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
p { line-height: 150%; }
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
Leave a Reply