HTML & CSS - Mastery / Visual Styling with CSS

Text Effects: Shadows, Decorations

🔶 1. text-shadow (Adding Shadow to Text)

🧠 Explanation:

  • 2px 2px: shadow offset to right and bottom

  • 5px: blur radius

  • rgba(0, 0, 0, 0.5): semi-transparent black shadow

🔶 2. text-decoration (Underline, Line Through, etc.)

🧠 Explanation:

  • underline: line below the text

  • line-through: a horizontal line cuts through the text (used for marking deletions)

  • overline: line above the text

🔶 3. text-decoration-style, text-decoration-color

🧠 Explanation:

Underlines the text with a wavy red line instead of a boring solid one.

🔶 4. letter-spacing and word-spacing (Spacing Adjustments)

🧠 Explanation:

Makes letters more spaced out and increases the gap between words.

🔶 5. text-transform (Uppercase, Lowercase, Capitalize)

🧠 Explanation:

  • uppercase: ALL TEXT IN CAPS

  • lowercase: all small letters

  • capitalize: First Letter Of Each Word

📊 CSS Text Effects Comparison Chart

Effect

Property

Description

Example Value

Shadow

text-shadow

Adds shadow to text

2px 2px 5px #000

Decoration

text-decoration

Underline, strike, etc.

underline

Decoration Style

text-decoration-style

Style of line

dashed, wavy

Decoration Color

text-decoration-color

Color of underline/line

red

Spacing

letter-spacing, word-spacing

Space between letters/words

3px, 10px

Transform

text-transform

Changes case visually

uppercase