CSS: The Definitive Guide, 5th Edition

Chapter 15. Text Properties

Because text is so important, many CSS properties affect it in one way or another. But didn’t we just cover that in Chapter 14? Not exactly: we covered only fonts—the importing and usage of typefaces. Text styles are different.

OK, so what is the difference between text and fonts? At the simplest level, text is the content, and fonts are used to display that content. Fonts provide the shape for the letters. Text is the styling around those shapes. Using text properties, you can affect the position of text in relation to the rest of the line, superscript it, underline it, and change the capitalization. You can affect the size, color, and placement of text decorations.

Indentation and Inline Alignment

Let’s start with a discussion of how you can affect the inline positioning of text within a line. Think of these basic actions as the same types of steps you might take to create a newsletter or write a report.

Originally, CSS was based on concepts of horizontal and vertical. To better support all languages and writing directions, CSS now uses the terms block direction and inline direction. If your primary language is Western-derived, you’re accustomed to a block direction of top to bottom, and an inline direction of left to right.

The block direction is the direction in which block elements are placed by default in the current writing mode. In English, for example, the block direction is top to bottom, or vertical, as one paragraph (or other text element) ...