CSS Text

This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.

• The letter-spacing property is used to add or subtract space between the letters that make up a word.

• The word-spacing property is used to add or subtract space between the words of a sentence.

• The text-indent property is used to indent the text of a paragraph.

• The text-align property is used to align the text of a document.

• The text-decoration property is used to underline, overline, and strikethrough text.

• The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

• The white-space property is used to control the flow and formatting of text.

• The text-shadow property is used to set the text shadow around a text.

Text Color

The color property is used to set the color of the text. The color is specified by:

a color name - like "red"

a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"

Example -

body { color: blue; } h1 { color: green; }

Run Example

Set the Text Direction

The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.

Example -

<p style="direction:rtl;">

Run Example

Text Alignment

The text-align property is used to set the horizontal alignment of a text.A text can be left or right aligned, centered, or justified.The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example -

h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }

Run Example

Set the Space between Characters

The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space.

Example -

<p style="letter-spacing:5px;">

Run Example

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

Example -

p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }

Run Example

Set the Space between Words

The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.

Example -

<p style="word-spacing:5px;">

Run Example

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example -

p { text-indent: 50px; }

Run Example

Set the Line Height

The line-height property is used to specify the space between lines:

Example -

p.small { line-height: 0.8; } p.big { line-height: 1.8; }

Run Example

Set the Text Shadow

The text-shadow property adds shadow to text.The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):

Example -

h1 { text-shadow: 3px 2px red; }

Run Example

Set the Text Indent

The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.

Example -

<p style="text-indent:1cm;">

Run Example

Decorating the Text

The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.

Example -

<p style="text-decoration:underline;"> <p style="text-decoration:line-through;"> <p style="text-decoration:overline;"> <p style="text-decoration:blink;">

Run Example