CSS Text Formatting

In this chapter we will learn about the properties of text such as text-color, it’s transformations, alignment also with line-height, word spacing, etc.

Text-transform:

This property is used to change the case of text such as uppercase, lowercase, capitalize, etc.

For example,

h1{ text-transform: uppercase;}

Text color:

This property is used to set the color of the text. The color is specified using color name, HEX value or RGB value. For example,

h1{color: red;}

Text align:

It sets the horizontal alignment of text either on left, right or centered. For example,

p{ text-align: left;}

When the text-align property is set to justify, each line is set so that every line has equal width and the left and right margins are straight.

Text-decoration:

It is used to set or remove decorations from text such as underline, overline,line through, blink, none, etc. For example,

h1{ text-decoration: underline;}

Letter spacing:

This property specifies the space between the characters in a text. For example,

h1{ letter-spacing: 2px;}

Word spacing:

This property specifies the space between the words in a text. For example,

p{ word-spacing: 8px;}

Line height:

Line-height property sets the height of the entire line of text. Increasing the line-height makes the gap between lines of text larger. For example,

p{ line-height: 1.2em;}

This was all about text formatting in CSS. In the next chapter, we will learn about the CSS box model.