⬅ Back

📘 CSS TEXT STYLING — COMPLETE NOTE

🎯 1. Why Text Styling is Important

Web pages are mainly used to:

So text must be:

👉 Important factors:

🔹 2. text-decoration

🧠 What it does

Controls text decoration. 

text-decoration: none | underline | line-through | overline;
📊 Examples
a {
  text-decoration: underline;
}

👉 default for links 

.link {
  text-decoration: none;
}

👉 removes underline 

.text a {
  text-decoration: line-through;
}

👉 crossed text

🎯 Real Example
.club-list .link {
  text-decoration: none;
}

.club-list .link:hover,
.club-list .link:focus {
  text-decoration: underline;
}

👉 no underline → hover → underline

🔹 3. text-transform

🧠 What it does

Changes letter case.

📊 Values
text-transform: none | uppercase | lowercase | capitalize;
🎯 Examples
.link {
  text-transform: uppercase;
}

👉 ALL CAPS 

p {
  text-transform: lowercase;
}

👉 all small 

h1 {
  text-transform: capitalize;
}

👉 First Letter Of Each Word

💡 Example (menu)
.site-nav .link {
  text-transform: uppercase;
  font-size: 14px;
}

🔹 4. text-align

🧠 What it does

Aligns text horizontally.

📊 Values
text-align: left | right | center | justify;
🎯 Examples
h1 {
  text-align: center;
}
p {
  text-align: right;
}
.text {
  text-align: justify;
}

⚠️ justify → harder to read

🔹 5. line-height

🧠 What it does

Controls space between lines.

📊 Syntax
line-height: number;
🎯 Example
.text {
  font-size: 16px;
  line-height: 1.5;
}

👉 spacing = 1.5 × font size

💡 Best practice

✔ use multiplier (not px)

🎯 Real Example
.page-title {
  line-height: 1.333;
}

.section-text {
  line-height: 1.5;
}

🔹 6. letter-spacing

🧠 What it does

Controls space between letters.

📊 Syntax
letter-spacing: value;
🎯 Examples
h1 {
  letter-spacing: 3px;
}
p {
  letter-spacing: 1px;
}
💡 Use cases

🔹 7. text-indent

🧠 What it does

Adds indent to the first line.

📊 Example
p {
  text-indent: 24px;
}

👉 first line moves right

💡 Notes

🔹 8. text-shadow

🧠 What it does

Adds shadow to text.

📊 Syntax
text-shadow: x y blur color;
🎯 Example
.title {
  text-shadow: 2px 2px 4px black;
}
🔍 Explanation
🎯 Real Example
.page-title {
  text-shadow: 2px 2px 4px #212121;
}

🔹 9. <span> Tag

🧠 What it is

Inline container for styling text.

📄 Example
<p>
  This is <span class="accent">important</span> text.
</p>
🎯 CSS
.accent {
  color: red;
}
💡 Important
🎯 Real Example
.downloads .plan-name {
  color: #ff1744;
}

🧠 FINAL SUMMARY

👉 text-decoration → underline, none 👉 text-transform → uppercase, lowercase 👉 text-align → alignment

👉 line-height → space between lines 👉 letter-spacing → space between letters 👉 text-indent → first line indent

👉 text-shadow → shadow effect 👉 <span> → style part of text

💪 BEST PRACTICES

👉 keep text readable 👉 avoid too much decoration 👉 use spacing carefully 👉 use <span> only when needed

⬅ Back