CSS Text

CSS Tutorial > Text

Here are the most commonly-used CSS properties related to text.

direction

letter-spacing

direction

The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'.

For example, with a CSS declaration of,

p {
direction:ltr;
}

The following HTML,

LTR Direction

renders

LTR Direction

With a CSS declaration of,

p {
direction:rtl;
}

The following HTML,

RTL Direction

renders

RTL Direction

letter-spacing

The letter-spacing property specifies the amount of space between characters. For example, with a CSS declaration of,

p {
letter-spacing:8px;
}

The following HTML,

8px between letters

renders

8px between letters

line-height

The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,

p {
line-height:30px;
}

The following HTML,

30px between line 1 and line 2.

renders

30px between line 1
and line 2.

text-align

The text-align property specifies how text is justified. Possible values are:

left: left-justified

right: right-justified

center: text is centered

justified: text is both right- and left-justified

Examples below:

CSS Declaration Output

p {
text-align:left;
}

This sentence illustrates what it looks like to be left-justified.

p {
text-align:right;
}

This sentence illustrates what it looks like to be right-justified.

p {
text-align:center;
}

This sentence illustrates what it looks like to be centered.

p {
text-align:justify;
}

This sentence illustrates what it looks like to be fully-justified.

text-decoration

The text-decoration property specifies how text is decorated. Possible values are:

underline: adds an underline to the text

overline: adds a line on top of the text

line-through: adds a line through the middle of the text.

blink: causes the text to blink.

Examples below:

CSS Declaration Output

p {
text-decoration:underline;
}

An underline example

p {
text-decoration:overline;
}

An overline example

p {
text-decoration:line-through;
}

A strikethrough (line-through) example

text-indent

The text-indent property specifies how much space to indent before the first line of the text in a block. Both length and percentage can be used. For example, with a CSS declaration of,

p {
text-indent:15px;
}

The following HTML,

This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

renders

This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

text-transform

The text-transform property controls how upper and lower cases are displayed. Possible values are:

capitalize: capitalizes the first letter in a word

uppercase: makes the entire word upper case

lowercase: makes the entire word lower case

none: no transform is performed

For example, if we apply each of the following CSS style to the text "this is a LAWYER", we get the following:

CSS Declaration Output

p {
text-transform:capitalize;
}

this is a LAWYER

p {
text-transform:uppercase;
}

this is a LAWYER

p {
text-transform:lowercase;
}

this is a LAWYER

word-spacing

The word-spacing property controls the amount of space between words. For example, with a CSS declaration of,

p {
word-spacing:5px;
}

The following HTML,

Words here are separated by 5px.

renders

Words here are separated by 5px.

Next: CSS Float

Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.