CSS Text

CSS provides various properties to style and format text on web pages. In this chapter, we’ll explore some of the most commonly used CSS text properties.

Text Color

The color property is used to set the color of the text.

p {
    color: blue;
}

Text Alignment

The text-align property is used to set the horizontal alignment of the text.

p.left {
    text-align: left;
}
p.center {
    text-align: center;
}
p.right {
    text-align: right;
}

Text Decoration

The text-decoration property is used to set the decoration of the text, such as underline, overline, line-through, etc.

p.underline {
    text-decoration: underline;
}
p.overline {
    text-decoration: overline;
}
p.line-through {
    text-decoration: line-through;
}

Text Transformation

The text-transform property is used to control the capitalization of text.

p.uppercase {
    text-transform: uppercase;
}
p.lowercase {
    text-transform: lowercase;
}
p.capitalize {
    text-transform: capitalize;
}

Text Indentation

The text-indent property is used to indent the first line of text in an element.

p {
    text-indent: 50px;
}

Line Height

The line-height property is used to set the height of a line of text.

p {
    line-height: 2;
}

Letter Spacing

The letter-spacing property is used to set the space between characters.

p {
    letter-spacing: 3px;
}

Word Spacing

The word-spacing property is used to set the space between words.

p {
    word-spacing: 10px;
}

Text Shadow

The text-shadow property is used to add shadow to text.

p {
    text-shadow: 2px 2px 5px grey;
}