• Choose a category
• All
• Classic-Fiction

By Root 1631 0

underline in Web pages. Users have been trained that underlined text is a link, so they may click your underlined text expecting it to take them somewhere.

The underline.html code produces a page similar to Figure 2-10.

Figure 2-10: You can underline text with text-decoration.

You can also use text-decoration for other effects, such as strikethrough (called “line-through” in CSS,) as shown in the following code:

C “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Strikethrough

This paragraph has strikethrough text.

The strikethrough.html code produces a page similar to Figure 2-11.

Figure 2-11: Text-decoration can be used for a strikethrough effect.

Text-decoration has a few other rarely used options, such as

♦ Overline: The overline attribute places a line over the text. Except for a few math and chemistry applications (which would be better done in an equation editor and imported as images), I can’t see when this might be used.

♦ Blink: The blink attribute is a distant cousin of the legendary tag in Netscape and causes the text to blink on the page. The tag (along with gratuitous animated GIFs) has long been derided as the mark of the amateur. Avoid blinking text at all costs.

There’s an old joke among Internet developers: The only legitimate place to use the tag is in this sentence: Schrodinger’s cat is not dead. Nothing is funnier than quantum mechanics illustrated in HTML.

Using text-align for basic alignment

You can use the text-align attribute to center, left-align, or right-align text, as shown in the following code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Centered

This paragraph is centered.

You can also use the text-align attribute to right- or left-justify your text. The page shown in Figure 2-12 illustrates the text-align attribute.

You can apply the text-align attribute only to text. The old

tag could be used to center nearly anything (a table, some text, or images), which was pretty easy but caused problems. Book III explains how to position elements in all kinds of powerful ways, including centering anything. Use text-align to center text inside its own element (whether that’s a heading, a paragraph, a table cell, or whatever).

Figure 2-12: This text is centered with text-align.

Other text attributes

CSS offers a few other text manipulation tools, but they’re rarely used:

♦ Font-variant: Can be set to small-caps to make your text use only capital letters. Lowercase letters are shown in a smaller font size.

♦ Letter-spacing: Adjusts the spacing between letters. It’s usually measured in ems. (See the section “Relative measurement units” earlier in the chapter for more on ems.) Fonts are so unpredictable on the Web that if you’re trying to micromanage this much, you’re bound to be disappointed by the results.

♦ Word-spacing: Allows you to adjust the spacing between words.

♦ Text-indent: Lets you adjust the indentation of the first line of an element. This value uses the normal units of measurement. Indentation can be set to a negative value, causing an outdent if you prefer.

♦ Vertical-align: Used when you have an element with a lot of vertical space (often a table cell). You can specify how the text behaves in this situation.