CSS Tutorials > Controlling Text Appearance with CSS

Controlling Text Appearance with CSS

In this tutorial 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.

1. word-spacing

This property controls the amount of space added to the default spacing between each word. The allowable values are:

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 tutorial CSS Units.

Examples:

p { word-spacing: 1em }

`Take some more tea,' the March Hare said to Alice, very earnestly.

p { word-spacing: normal }

`Take some more tea,' the March Hare said to Alice, very earnestly.

2. letter-spacing

This property is similar to word-spacing, but controls the spacing added between each individual letter. Possible values are:

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 tutorial CSS Units.

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.

3. 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:

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.

4. vertical-align

This property controls the vertical placement of the text. It's similar to the valign attribute in HTML. The allowable values are:

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 tutorial CSS Units 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.

5. 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:

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.

6. text-align

This property is similar to the align attribute in HTML. Options are:

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.

7. 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% }

length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the tutorial CSS Units.

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.

8. line-height

The final text property, line-height, controls the distance between lines of text. Possible values are:

There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.

The 2nd category of Java applications called Java Application Servers (or app servers) and they make good use of XML. Unlike client side graphical Java apps (from the previous section) which are very standalone in their operations, app servers tie many different networked software components together in order to provide information from multiple sources to a set of client side Java apps or web browsers (maybe even running on different devices). This is shown in Figure 2. An app server is actually a conglomeration of several distributed and client/server software systems. So when you write an app server, you are actually writing many different software systems which are all networked to work together, to process information that comes from various sources, and distribute this information to a set of client apps (that you also have to write) running on different devices and platforms.

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.

length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the tutorial CSS Units.

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.

The End

That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters.

If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun!