Text styling in CSS controls how text appears on a webpage. It helps improve readability, visual hierarchy, and user experience.

Text styling includes:

• Color
• Text Alignment
• Text Decoration
• Text Transform
• Text Spacing
• Line Height
• Text Shadow

---

Color

The color property changes the color of text.

color: value;

Example:

h1 {
    color: blue;
}

Using HEX:

h1 {
    color: #2563EB;
}

Using RGB:

h1 {
    color: rgb(37, 99, 235);
}

Using HSL:

h1 {
    color: hsl(220, 80%, 55%);
}

Example:

body {
    color: #333333;
}

All text becomes dark gray.

---

Text Alignment

The text-align property controls the horizontal alignment of text.

text-align: value;

Left (default):

text-align: left;

Center:

text-align: center;

Right:

text-align: right;

Justify:

text-align: justify;

Example:

.hero {
    text-align: center;
}

---

Text Decoration

The text-decoration property adds or removes decorative lines.

text-decoration: value;

Underline:

text-decoration: underline;

Overline:

text-decoration: overline;

Line-through:

text-decoration: line-through;

Remove link underline:

a {
    text-decoration: none;
}

Example:

.nav-link {
    text-decoration: none;
}

---

Text Transform

The text-transform property changes the letter casing.

text-transform: value;

Uppercase:

text-transform: uppercase;

Output:

FRONTEND DEVELOPMENT

Lowercase:

text-transform: lowercase;

Output:

frontend development

Capitalize:

text-transform: capitalize;

Output:

Frontend Development

None (default):

text-transform: none;

Example:

button {
    text-transform: uppercase;
}

---

Text Spacing

Text spacing controls the distance between letters and words.

Letter Spacing

The letter-spacing property controls spacing between characters.

letter-spacing: value;

Example:

h1 {
    letter-spacing: 2px;
}

Negative spacing:

letter-spacing: -1px;

---

Word Spacing

The word-spacing property controls spacing between words.

word-spacing: value;

Example:

p {
    word-spacing: 10px;
}

Example:

.hero-title {

    letter-spacing: 2px;

    word-spacing: 5px;

}

---

Line Height

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

line-height: value;

Example:

p {
    line-height: 2;
}

Common values:

line-height: 1.2;
line-height: 1.5;
line-height: 1.8;
line-height: 2;

Best practice:

body {
    line-height: 1.6;
}

Adequate line height makes paragraphs easier to read.

---

Text Shadow

The text-shadow property adds shadow effects to text.

Syntax:

text-shadow:
horizontal
vertical
blur
color;

Example:

h1 {

    text-shadow:
    2px 2px 5px gray;

}

Breakdown:

2px  → Horizontal Offset
2px  → Vertical Offset
5px  → Blur Radius
gray → Shadow Color

Example:

h1 {

    text-shadow:
    3px 3px 10px black;

}

Glow effect:

h1 {

    text-shadow:
    0 0 15px blue;

}

Multiple shadows:

h1 {

    text-shadow:

    1px 1px 2px black,

    0 0 10px blue;

}

---

Complete Example

HTML:

<h1>
    Frontend Development
</h1>

<p>
    Learn HTML, CSS, and JavaScript.
</p>

CSS:

h1 {

    color: #2563EB;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow:
    2px 2px 4px gray;

}

p {

    color: #555;

    line-height: 1.8;

}

---

Real-World Example

.hero-title {

    color: white;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 4px;

    text-shadow:
    0 2px 10px rgba(0,0,0,0.5);

}

---

Text Styling Best Practices

Use readable text colors.

color: #333333;

Avoid very light text on white backgrounds.

---

Use comfortable line height.

line-height: 1.6;

---

Keep text shadows subtle.

Good:

text-shadow:
0 2px 4px rgba(0,0,0,0.2);

Avoid:

text-shadow:
10px 10px 20px red;

---

Use text transformation carefully.

Good for headings:

text-transform: uppercase;

Avoid applying uppercase to long paragraphs.

---

Key Takeaway

Text styling controls how readable and visually appealing text appears.

h1 {

    color: #2563EB;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow:
    2px 2px 4px gray;

}

A well-designed website typically uses:

• Readable colors
• Proper alignment
• Comfortable line height
• Balanced letter and word spacing
• Subtle text shadows