Text Formatting

¢In addition to the font properties, you can use several properties to affect the appearance or formatting of your text.

The color Property

¢The color property allows you to specify the color of the text.

p {color:#ff0000;}

The text-align Property

The text-align property works like the deprecated align attribute would with text.

Example:

td.leftAlign {text-align:left;}

td.rightAlign {text-align:right;}

td.center {text-align:center;}

td.justify {text-align:justify;}

The vertical-align Property

The vertical-align property is useful when working with inline elements, in particular images and

portions of text. It allows you to control their vertical positioning within the containing element.

The text-decoration Property

For example, here are these properties used on separate paragraphs:

p.underline {text-decoration:underline;}

p.overline {text-decoration:overline;}

p.line-through {text-decoration:line-through;}

p.blink {text-decoration:blink;}

The text-indent Property

The text-indent property allows you to indent the first line of text within an element.

.indent {text-indent:3em;}

The text-shadow Property

¢The text-shadow property is supposed to create a drop shadow, which is a dark version of the word just behind it and slightly offset.

.dropShadow { text-shadow: 0.3em 0.3em 0.5em black}

The text-transform Property

The text-transform property allows you to specify the case for the content of an element.

<p class=”none”><i>The Catcher in the Rye</i> was written by J.D. Salinger</p>

p.none {text-transform:none;}

p.Capitalize {text-transform:Capitalize;}

p.UPPERCASE {text-transform:UPPERCASE;}

p.lowercase {text-transform:lowercase;}