CSS Text

In this tutorial you will learn about Cascading Style Sheets (CSS), Text, Text color, Text background color, Text direction, Text align, Text indent, Text transform, Text decoration, Letter spacing and Word spacing.

Text color

To set the text color, use the “color” property.

Example:

p
{
color: #FF0000;
}
h1
{
color: red;
}

This sets the HTML element < p > and the HTML element < h1 > to red.

Text background color

To set the background color of an element, use the property “background-color”, this property was explained in CSS background lesson.

Text direction

To set the text direction, use the “direction” property, it can take one of two values:

• ltr: sets the direction to be from left to right as in English and French.
• rtl: sets the direction to be from right to left as in Arabic and Hebrew.

Example:

body
{
direction: rtl;
}

This sets the text direction of the whole document to be from right to left.

Text align

to align the text contained in an element to the element, use the property “text-align”, this property can take one of the following values:
left, right, center, or justify.

Example:

P
{
text-align: right;
}

This aligns the element < p > text to the right of the element that it’s contained in.

Text indent

To indent the first line of a text, use the “text-indent” property, the value can be an absolute length, or a percentage value.

Example:

P
{
text-indent: 15px;
}

This indents the first line of the HTML element < p > 15 pixels.

Text transform

To set the text letters case, use the property “text-transform”, this property can have one of the following values:

• none: no transformation.
• capitalize: the first letter of each word will be in upper case.
• uppercase: all letters will be uppercase.
• lowercase: all letters will be lowercase.

Example:

P
{
text-transform: lowercase;
}

This sets all the < p > element text characters to be in lowercase.

Text decoration

To set the text decoration, use the property “text-decoration”, it can have one of the following values:

• none: no decoration
• underline: the text will be decorated using a line under it.
• overline: the text will be decorated using a line over it.
• line-through: the text will be decorated using a line through it.

Example:

.underline
{
text-decoration: underline;
}

This causes any text element that uses this class to be underlined.

Letter spacing

To increase or decrease the space between characters, use the property “letter-spacing”, it can have one of the following values:

• normal: the normal letters spacing of the used font.
• A length value.

Example:

Body
{
letter-spacing: 1px;
}

This sets the space between all characters in the document to 1 pixel.

Word spacing

To increase or decrease the space between words, use the property “word-spacing”, it can have one of the following two values:

• Normal: the normal words spacing of the used font.
• A length value.

Example:

P
{
word-spacing: 2px;
}

This sets the space between all words in the document to 2 pixels.