CSS IntroductionCSS Getting StartedCSS SyntaxCSS ConceptCSS ColorCSS BackgroundCSS TextCSS FontCSS Dimensions - Width and HeightCSS PaddingCSS BorderCSS MarginCSS ListCSS LinkCSS TableCSS FormCSS Display and VisibilityCSS PositionCSS FloatCSS OutlineCSS OverflowCSS OpacityCSS Pseudo-Class

CSS Text

CSS

← PrevNext →

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

This is another line.

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;
}

This is a sample paragraph.

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

p {
	text-decoration : overline;
}

This is a sample paragraph.

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

p {
	text-decoration : line-through;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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

p {
	text-align : center;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

We are discussing the text-indent property. We use it to indent the first line of text. In this example we have set the text-indent to 30px. So, when this paragraph is displayed, the first line is indented 30px to the right and then rest of the lines is displayed normally (without any indentation).

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;
}

This is a sample paragraph.

← PrevNext →