Text Properties

Text properties affect the visual presentation of characters, spaces, words, and paragraphs. As with the font properties, text properties generally work as intended in all browsers newer than Netscape 4.x. Text properties include:

• Color
• Text-indent
• Letter-spacing
• Word-spacing
• Text-decoration
• Text-align
• Text-transform
• Vertical-align
• Line-height

Color

The color property sets the color of the text. Color can be specified by using hexadecimal, RGB, percentage RGB, or color name values (see Week 2 Rule Declarations for review). EXAMPLES.

The rule syntax is:

Note: The Web Developer Toolbar page on Validation mentions that you may see validation warnings if you specify a color but no background-color, or vice versa. These are only warnings, not errors. They are meant to alert you to a potential useability issue with user style sheets if both color and background-color are not specified together.

Text-Indent

The text-indent property sets the start position of a paragraph of text. If not otherwise indicated, text normally begins flush with the left margin of the containing element. Remember to take into account that the body default margin is a few pixels from the left edge of the viewport (depending on the browser), unless the margins have been set to zero.

The text-indent value measurements can be either positive or negative. The syntax is:

Here are some EXAMPLES of positive and negative text-indent settings.

The text-indent property is inherited. If you have a DIV which contains several P tags, the paragraphs (as well as other tags inside the DIV) inherit the text-indent as well. This can make for a nice relationship within the DIV.

Rendered Example:

Letter-Spacing

To adjust the spacing between letters, use the text property letter-spacing. Letter-spacing is generally used as a design element and is not recommended for body text. The property values can be set using positive or negative measurements to deviate from the normal letter spacing. If you use negative values, they must be quite small or the text will be unreadable. The syntax is:

Here are some EXAMPLES of letter spacing.

Word-Spacing

To adjust the spacing between words, use the text property word-spacing. Word-spacing is generally used as a design element and should be used carefully with regards to readability. The values that can be applied to the word-spacing property are normal, a length or percentage, or inherit. The values can be positive or negative. If you use negative values, they must be quite small or the words will begin to overlap. The syntax is:

Here are some EXAMPLES of word-spacing.

Text-Decoration

The most common usage of text-decoration is the web default of underlining links. Users have come to expect links to be underlined, so remove this text decoration at your own risk! Likewise, think carefully about underlining text that is not a link as it may confuse your users.

Values for text decoration are none (which is the default), underline, overline, line-through, and the notorious blink (which you should never use!). In the past, most of these were rarely used, but recently, line-throughs have become more common in blogs to highlight updates or changes to original posts.

The syntax for text-decoration is:

Here are some EXAMPLES of text-decoration.

Text-Align

The text-align property is one of the first CSS properties most people learn. The values are left (the default), center, right and justify. It works exactly as you might expect. This paragraph is an example of the default or left alignment. The syntax for text-align is:

Here are some EXAMPLES of text-align properties.

Text-Transform

I once had a boss who typed everything in capital letters. This was before Word had a built-in tool to change all the caps to lower case so I would have to re-type all of his text. ARRGHHH!!

You may be faced with a similar situation if you receive text from clients in a variety of formats. You could paste the into Word and transform it there, or you could use CSS text-transform. The values are uppercase, lowercase, capitalize and none (the default). Note that capitalize will capitalize every word in a sentence. Unfortunately, there is no "sentence" transform to capitalize only the first word of each sentence. Bah! The text-transform syntax is:

Here are some EXAMPLES of text-transform properties.

Vertical-Align

The vertical-align property moves type up or down relative to the baseline. The values are baseline, sub, super, top, text-top, middle, bottom , text-bottom, plus length and percentage measures. Its most common use is for subscripts, superscripts and formulas. Look at these EXAMPLES. The first example uses the XHTML tags SUP and SUB. The second example uses contextual selectors with CSS for much more control over the SUP and SUB tags. Using the VERTICAL-ALIGN property can give you more pleasing results.

The syntax for the vertical-align property is:

Note: it would be natural to assume that vertical-align works similarly to valign in tables so that an element can be aligned at the top of a container. Unfortunately, this is not the case and it is very difficult to use CSS to vertically align an element such as a single line of text. But it is possible. See Vertical Centering in CSS for details and code examples. You can also submit your request for this much needed feature to the W3C and the Web Standards Project!

Line-Height

The line-height property is also known to printers as "leading" (pronounced ledding). During the "hot type" days, lines of lead were placed between the lines of type to add space. Leading is the distance between the lines of type, measured from one baseline to the next. It is usually greater than the size of the type. In books, type is frequently 12 points with 14 or 16 points of leading.

The distance between the lines is dependent on the size of the font. Browsers usually set the leading to approximately 118% of the font size. This can be changed by using the line-height property. Line-height can also be added to the font shorthand property, even though it is a text property. It is combined with the font size and separated by a slash (see below). The syntax is as follows.

Line-height values can be expressed either as a decimal or percent number which is then calculated against the current font size. Here are some EXAMPLES of line-height.

Modified - Tuesday, April 3, 2007