In this tutorial we will learn about CSS Text styling property.

color

We use the color property to set the color of the text. This can take value in color-name, hex, rgb, rgba.

Click here for CSS Color tutorial.

In the following example we have set the color of the text to red.

p {
	color : red;
}

background-color

We use the background-color property to set the background color for the text.

In the following example we have set the background color lightyellow.

p {
	background-color : lightyellow;
}

line-height

We use the line-height property to set the spacing between the lines.

In the following example we have set the line-height to 16px and font-size to 14px;

p {
	font-size : 14px;
	line-height : 16px;
}

text-decoration

We use the text-decoration property to decorate the text. Values that we can use are none, underline, overline and line-through.

In the following example we have set the text-decoration to underline.

p {
	text-decoration : underline;
}

In the following example we have set the text-decoration to overline.

p {
	text-decoration : overline;
}

In the following example we have set the text-decoration to line-through.

p {
	text-decoration : line-through;
}

text-align

We use the text-align property to align the text horizontally. Some of the values that we can set are left, center and right.

In the following example we have set the text-align to right.

p {
	text-align : right;
}

In the following example we have set the text-align to center.

p {
	text-align : center;
}

letter-spacing (kerning)

We use the letter-spacing property to set the space between characters.

In print, the space between characters is referred as kerning.

In the following example we have set the letter-spacing to 5px.

p {
	letter-spacing : 5px;
}

text-transform

We use the text-transform property to transform the case of the text.

Following are the values that we can set.

• lowercase - this will give lowercase characters
• uppercase - this will give uppercase characters
• capitalize - this will capitalize first letter of every word

In the following example we have set the text-transform to uppercase.

p {
	text-transform : uppercase;
}

text-indent

We use the text-indent property to specify the indentation for the first line of text.

In the following example we have set the text-indent to 30px;

p {
	text-indent : 30px;
}

word-spacing

We use the word-spacing to set the space between words.

In the following example we have set the word-spacing to 10px;

p {
	word-spacing : 10px;
}