Section A.2. Text Properties | Dreamweaver CS3: The Missing Manual

A.2. Text Properties

The following properties affect how text is formatted on a Web page. Since most of the properties in this category are inherited, you don't necessarily have to apply them to tags specifically intended for text (like the <p> tag). You can apply these properties to the <body> tag, so that other tags inherit and use the same settings. This technique is a quick way to create an overall font, color , and so on for a page or section.

A.2.1. color (inherited)

Sets the color of text. Since it's inherited, if you set the color of the <body> tag to red, for example, all text inside of the bodyand all other tags inside the <body> tagis red, too.

Values : any valid color value
Example : color: #FFFF33;

Note: The preset link colors for the <a> tag override color inheritance. In the above example, any links inside the <body> tag would still be standard hyperlink blue. See Section 9.1 for ways to change preset link colors.

A.2.2. font (inherited)

This is a shortcut method for cramming the following text properties into a single style declaration: font-style, font-variant, font-weight, font- size , line-height , and font-family . (Read on for the individual descriptions.)

You must separate each value by a space and include at least font-size and font-family, and those two properties must be the last two items in the declaration. The others are optional. If you don't set a property, the browser uses its own preset value, potentially overriding inherited properties.

Values : Any value that's valid for the specific font property. When including a line-height, add a slash followed by the line-height after the font size like this: 1.25em/150% .
Example : font: italic small-caps bold 1.25em/150% Arial, Helvetica, sans-serif ;

A.2.3. font-family (inherited)

Specifies the font the browser should use to display text. Fonts are usually specified as a series of three to four options to accommodate the fact that a particular font may not be installed on a visitor's computer. See Section 6.1.1.

Values : A comma-separated list of font names . When a font has a space in its name, surround that font name with quotes. The last font listed is usually a generic font type instructing browsers to choose a suitable font if the other listed fonts aren't available: serif, sans-serif, monotype, fantasy, or cursive .
Example : font-family: "Lucida Grande", Arial, sans-serif;

A.2.4. font-size (inherited)

Sets the size of text. This property is inherited, which can lead to some weird behaviors when using relative length measurements like percentages and ems.

Values : Any valid CSS measurement unit (Section A.1.1.1), plus the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large, larger , and smaller. Medium represents the Web browser's normal, preset font size, and the other sizes are multiples of medium. The exact numbers depend on the browser, but they're generally a factor of 1.2. For example, large is 1.2 times as big as medium . Due to the uncertainty of how each browser handles these keywords, many designers use pixels, ems, or percentages instead.
Example : font-size: 1.25em;

Note: When the font-size property is inherited from another tag, these keywords multiply the inherited font size by the same factor (1.2 in most browsers).

A.2.5. font-style (inherited)

Makes text italic. Applied to italic text, it turns it back to plain text. The options italic and oblique are functionally the same.

Values : italic, oblique, normal
Example : font-style: italic ;

A.2.6. font-variant (inherited)

Makes text appear in small caps, like this: SPECIAL PRESENTATION. The value normal removes small caps from text already formatted that way.

Values : small-caps, normal
Example : font-variant: small-caps ;

A.2.7. font-weight (inherited)

Makes text bold, or removes bolding from text already formatted that way.

Values : CSS actually provides 14 different font-weight keywords, but only a couple actually work with today's browsers and computer systems bold and normal .
Example : font-weight: bold ;

A.2.8. letter-spacing (inherited)

Adjusts the space between letters to spread out letters (adding spacing between each) or cram letters together (removing space).

Values : Any valid CSS measurement unit, though ems and pixels are most common. For this property, percentages don't work in most browsers. Use a positive value to increase the space between letters and a negative value to remove space (scrunch letters together). The value normal resets letter-spacing to its regular browser value of 0.
Examples : letter-spacing: -1px; letter-spacing: 2em ;

A.2.9. line-height (inherited)

Adjusts space between lines of text in a paragraph (often called line spacing in word processing programs). The normal line height is 120 percent of the size of the text (Section 6.4).

Values : Most valid CSS lengths (Section A.1.1.1), though ems and pixels and percentages are most common.
Example : line-height: 200% ;

A.2.10. text-align (inherited)

Positions a block of text to the left, right, or center of the page or container element.

Values : left, center, right, justify (the justify option often makes text difficult to read on monitors ).
Example : text-align: center ;

A.2.11. text-decoration

Adds lines above, under, and/or through text. Underlining is common with links, so it's usually a good idea not to underline text that isn't a link. The color of the underline, overline, or strike-through line is the same as the font color of the tag being styled. The property also supports a blink value that makes text flash off and on obnoxiously.

Values : underline, overline, line-through, blink, none . The none value turns off all decoration. Use this to hide the underline that normally appears under links. You can also add multiple decorations by listing the name of each type (except none ) separated by a space.
Example : text-decoration: underline overline line-through ;

A.2.12. text-indent (inherited)

Sets the indent size of the first line of a block of text. The first line can be indented (as in many printed books) or outdented, so that the first line hangs off and over the left edge of the rest of the text.

Values : Any valid CSS measurement unit. Ems and pixels are most common; percentages behave differently than with the font-size property. Here, percentages are based on the width of the box containing the text, which can be the width of the entire browser window. So 50% would indent the first line half of the way across the window (see Section 7.5.1 for a detailed explanation). To outdent (hang the first line off the left edge), use a negative value. This technique works well in conjunction with a positive left-margin property (Section A.1.1), which indents the left side of the other lines of text a set amount.
Example : text-indent: 3em ;

A.2.13. text-transform (inherited)

Changes the capitalization of text, so text appears in all uppercase letters, all lowercase, or only the first letter of each word capitalized.

Values : uppercase, lowercase, capitalize, none . The none option returns the text to whatever case is in the actual HTML code. If aBCDefg are the actual letters typed in HTML, then none removes any other inherited case set by an ancestor tag and displays aBCDefg onscreen.
Example : text-transform: uppercase ;

A.2.14. vertical-align

Sets the baseline of an inline element relative to the baseline of the surrounding contents. With it, you can make a character appear slightly above or below surrounding text. Use this to create superscript characters like , , or . When applied to a table cell , the values top, middle, bottom , and baseline control the vertical placement of content inside the cell (Section 10.2.1).

Values : baseline, sub, super, top, text-top, middle, bottom, text-bottom , a percentage value, or an absolute value (like pixels or ems). Percentages are calculated based on the element's line-height value (Section A.1.1).
Examples : vertical-align: top; vertical-align: -5px; vertical-align: 75% ;

A.2.15. white-space

Controls how the browser displays space characters in the HTML code. Normally, if you include more than one space between words"Hello Dave"a Web browser displays only one space"Hello Dave." You can preserve any white space exactly as is in the HTML using the pre value, which does the same as the HTML <pre> tag. In addition, Web browsers will split a line of text at a space, if the line won't fit within the window's width. To prevent text from wrapping, use the nowrap value. But the nowrap value makes all of the paragraph's text stay on one line, so don't use it with long paragraphs (unless you like the idea of making your visitors scroll endlessly to the right).

Values : nowrap, pre, normal . Two other values pre-line and pre-wrap don't work in many browsers.
Example : white-space: pre ;

A.2.16. word-spacing (inherited)

Works like the letter-spacing property (Section A.1.1), but instead of letters, it adjusts space between words.

Values : Any valid CSS measurement unit, though ems and pixels are most common; percentages don't work in most browsers. Use a positive value to increase the space between words and a negative value to remove space (scrunch words together). The value normal resets word spacing to its regular browser value of 0.
Examples : word-spacing: -1px; word-spacing: 2em ;