Skip to main content

Getting StartED with CSS

Text Properties

These properties are used to control the appearance of text. See Chapter 2 for a detailed description.

color

Accepted values:
A color value
Default:
Officially depends on user agent, but is usually black
Inherited:
Yes

Sets the color of text. Borders and outlines inherit this color if not defined separately.

direction

Accepted values:
ltr, rtl
Default:
ltr
Inherited:
Yes

Controls the display of text according to whether it should be read left to right (ltr) or right to left (rtl). If direction is set to rtl on the page body, the vertical scrollbar moves to the left side of the browser window. Setting direction to rtl with a language normally read from left to right, such as English, does not reverse the order of characters in the text.

font-family

Accepted values:
A comma-separated list of font names
Default:
Depends on user agent
Inherited:
Yes

Sets the font used for text. Browsers use the fonts available on the user’s computer, so a selection of fonts should be specified in order of preference. Font names that include spaces should be enclosed in quotes. The final value in the list should be one of the following keywords indicating the type of font to be used if none of the others is available: serif, sans-serif, monospace, cursive, fantasy.

font-size

Accepted values:
A percentage, size with a unit of measurement, or one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
Default:
medium
Inherited:
Yes

Sets the size of the font. See Table 2-4 in Chapter 2 for definition of the keywords.

font-style

Accepted values:
normal, italic, oblique
Default:
normal
Inherited:
Yes

Changes the font between italic and regular text. If the font has an oblique version, it is used when this property is set to oblique. Otherwise, the text is italicized.

font-variant

Accepted values:
normal, small-caps
Default:
normal
Inherited:
Yes

Setting this property to small-caps displays the text as small capitals. If the font does not support them, the text is rendered in uppercase.

font-weight

Accepted values:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Default:
normal
Inherited:
Yes

Displays the text in a bold or regular font. The comparative and numerical keywords are of little practical value. Use normal or bold.

font

Default:
See individual properties
Inherited:
Yes

Shorthand property that permits you to combine into a single declaration the values for font-style, font-variant, font-weight, font-size, line-height, and font-family. Difficult to use.

The first three values are optional, and can be in any order. The remaining values must be in the order listed, but line-height is optional. If both font-size and line-height are specified, they must be separated by a forward slash.

When using the font shorthand property, values for font-size and font-family are mandatory. A common mistake is to use font as a synonym for font-family. Browsers ignore the entire rule if font-size is omitted.

letter-spacing

Accepted values:
A size with a unit of measurement, or the keyword normal
Default:
normal
Inherited:
Yes

Increases the horizontal spacing between characters—the equivalent of tracking in typography. Decreases horizontal spacing if used with a negative value.

line-height

Accepted values:
A positive number, percentage, size with a unit of measurement, or the keyword normal
Default:
normal
Inherited:
Yes

Increases or decreases the vertical spacing between lines of text—the equivalent of leading in typography. Decimal fractions, and values less than 1 are permitted, but not negative values. The most reliable way of specifying line-height is with a number, such as 1.4, which ensures that the vertical space remains proportional to the current font.

text-align

Accepted values:
left, right, center, justify
Default:
left for languages written left to right
Inherited:
Yes

Controls the horizontal alignment of text.

text-decoration

Accepted values:
The keyword none, or any combination of underline, overline, line-through, blink
Default:
none
Inherited:
No

Underlines, overlines, and strikes through text. Setting the value to blink causes the text to flash on and off continuously. These four effects can be applied in any combination by specifying the values as a space-separated list. Setting the value to none removes all effects.

text-indent

Accepted values:
A percentage, or a size with a unit of measurement
Default:
0
Inherited:
Yes

Indents the first line in a block of text by the specified amount. Cannot be used to indent the whole block of text (use margin and/or padding for this purpose).

text-transform

Accepted values:
capitalize, uppercase, lowercase, none
Default:
none
Inherited:
Yes

Converts text to uppercase, lowercase, or initial capitals. Setting the value to none renders the text in the original letter case.

unicode-bidi

Accepted values:
normal, embed, bidi-override
Default:
normal
Inherited:
No

Controls how text is displayed when left-to-right and right-to-left languages are displayed in the same document, e.g., English and Arabic or Hebrew. See the CSS2.1 specification for details.

vertical-align

Accepted values:
A percentage, size with a unit of measurement, or one of the following keywords: baseline, sub, super, top, text-top, middle, bottom, text-bottom
Default:
baseline
Inherited:
No

Controls the vertical alignment of text, images, and other inline content. It cannot be used to control block-level elements, except inside a table cell or when the element’s display property has been set to one of the table-related values. See Chapter 2 for a description of the values.

white-space

Accepted values:
normal, pre, nowrap, pre-wrap, pre-line
Default:
normal
Inherited:
Yes

Controls the treatment of spaces in the underlying HTML code. The keywords have the following effect:

word-spacing

Accepted values:
A size with a unit of measurement, or the keyword normal
Default:
normal
Inherited:
Yes

Increases or decreases the width of spaces in text.