CSS Text Properties

CSS (Cascading Style Sheets) is a powerful tool that enables you to control the presentation of text on a web page. This guide covers the key CSS text properties that help in styling text effectively, enhancing readability and visual appeal.

Key Concepts

1. Text Color

• Use the color property to set the color of the text.

Example:

p {
    color: blue;
}

2. Text Alignment

• The text-align property aligns text within its container.

Possible values:

• left: Aligns text to the left.
• right: Aligns text to the right.
• center: Centers the text.
• justify: Justifies the text (aligns both left and right).

Example:

h1 {
    text-align: center;
}

3. Text Decoration

• The text-decoration property adds decorations to text, such as:
• underline: Underlines the text.
• overline: Places a line over the text.
• line-through: Strikes through the text.
• none: Removes any decorations.

Example:

a {
    text-decoration: underline;
}

4. Text Transformation

• The text-transform property changes the case of the text.

Possible values:

• uppercase: Converts text to uppercase.
• lowercase: Converts text to lowercase.
• capitalize: Capitalizes the first letter of each word.

Example:

h2 {
    text-transform: uppercase;
}

5. Line Height

• The line-height property controls the space between lines of text.

Example:

p {
    line-height: 1.5;
}

6. Letter Spacing

• The letter-spacing property adds space between characters.

Example:

h3 {
    letter-spacing: 2px;
}

7. Word Spacing

• The word-spacing property adds space between words.

Example:

p {
    word-spacing: 5px;
}

Conclusion

CSS text properties play a crucial role in enhancing the readability and visual appeal of text on web pages. By mastering these properties, you can create better user experiences through effective text styling.