Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Text formatting

Text properties control text alignment, spacing and formatting such as underline and case. They affect how the browsers displays letters, spaces, words, and paragraphs.

In standard HTML, alignment wasn’t very consistent. You had the <center> tag and you could use the align attribute on some tags but not on others. The text-align property improves things because it lets you align the text in any tag to the left, right, or centre. If you are lucky, you might even get justified text. In theory, the vertical-align property lets you set the vertical alignment for the tag but it doesn’t work properly.

The text-decoration property gives you decorative text. You can underline, overline, strike-through and (if you use Netscape) blink text. Not much new there: you could do most of this with tags like <u> and <strike>.

CSS2 now gives you some extra effects:

  • Use text-indent to indent the first line of text. This is much better than no-breaking spaces or little blank pictures to add a space
  • Use text-shadow to create a drop shadow in a variety of colours. You could only do this with a graphic in standard HTML
  • Use text-transform to change the case of text

You also have more control over how the browser spaces text. Use the letter-spacing property to set the amount of white space between letters, the line-height property to set for leading (the distance between the baselines of two lines of text), and the word-spacing property to add or decrease space between words.

The whitespace property tells the browser how to handle multiple spaces.