CSS Text

CSS provides a number of properties to manage the display of text. The most common ones are listed below:

direction: sets the direction of text flow.

letter-spacing: sets the amount of space between letters.

line-height: sets the amount of space between the baseline of two lines.

text-align: sets the justification properties of text.

text-decoration: determines how to use a line to decorate text.

text-indent: sets the amount of space to indent before each line of text in a block.

text-transform: sets whether upper-case letters or lower-case letters are used.

word-spacing: sets the amount of space between two words.

Below are a few examples to show the impact:

Example 1: change amount of space between letters and add an underline

CSS Declaration

p {
letter-spacing: 5px;
text-decoration: underline;
}

The following HTML,

<p>Wider gaps between letters with underline.</p>

renders

Wider gaps between letters with underline.

Example 2: align text to the right, use all upper case letters, and use double space between lines

CSS Declaration

p {
text-align: right;
text-transform: uppercase;
line-height: 2;
}

The following HTML,

<p>This paragraph is justified to the right, double-spaced, and in all caps. </p>

renders

This paragraph is justified to the right, double-spaced, and in all caps.

Next: CSS Direction

AdBlock Detected!