Styling Text and Fonts in CSS

Introduction

Typography plays a crucial role in web design, impacting readability and aesthetics. CSS provides various properties to style text and fonts, allowing developers to enhance user experience.

1. Changing Text Color

The color property defines text color.

p {
    color: blue;
}

2. Font Family

Defines the font style for text.

body {
    font-family: Arial, sans-serif;
}

3. Font Size

Adjusts the size of the text.

h1 {
    font-size: 32px;
}

Units Used:

• px (pixels)
• em (relative to parent element)
• rem (relative to root element)
• % (relative to parent size)

4. Font Weight

Controls text thickness.

p {
    font-weight: bold;
}

Values:

• normal
• bold
• lighter
• bolder
• Numeric values (100-900)

5. Font Style

Defines text style.

p {
    font-style: italic;
}

6. Text Alignment

Aligns text horizontally.

div {
    text-align: center;
}

Options:

• left
• right
• center
• justify

7. Text Decoration

Adds or removes decorations like underline.

a {
    text-decoration: none;
}

Options:

• underline
• overline
• line-through

8. Text Transform

Controls text capitalization.

h2 {
    text-transform: uppercase;
}

Options:

• uppercase
• lowercase
• capitalize

9. Letter and Word Spacing

Adjusts spacing between letters or words.

p {
    letter-spacing: 2px;
    word-spacing: 5px;
}

Conclusion

Using CSS text and font properties enhances readability and user engagement. Mastering these properties is key to professional web design.