CSS

CSS provides powerful properties to style text, control alignment, spacing, decoration, and transformation. This guide covers everything you need to know about CSS text properties.

---

1️⃣ Basic CSS Text Properties

Property	Description
color	Sets the text color
font-size	Defines the text size
font-family	Sets the font type
font-weight	Makes text bold or light
font-style	Defines text style (italic, normal, oblique)
text-align	Aligns text (left, center, right, justify)
text-decoration	Adds underline, overline, or strikethrough
text-transform	Changes text case (uppercase, lowercase, capitalize)
letter-spacing	Controls space between letters
word-spacing	Controls space between words
line-height	Adjusts spacing between lines

---

2️⃣ color – Setting Text Color

Defines the color of the text using:

• Named colors (red, blue, green)
• Hex codes (#ff0000)
• RGB (rgb(255, 0, 0))
• HSL (hsl(0, 100%, 50%))

Example

p {
    color: #3498db;
}

---

3️⃣ font-size – Adjusting Text Size

Controls the size of the text. You can use:

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

Example

h1 {
    font-size: 24px;
}

p {
    font-size: 1.2em;
}

📌 1em = 100% of parent font size
📌 1rem = 100% of root font size

---

4️⃣ font-family – Choosing Fonts

Defines the typeface of text.

Example

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

📌 Always provide fallback fonts in case the main font isn’t available.

Common Font Types

Font Type	Example
Serif	Times New Roman, Georgia
Sans-serif	Arial, Helvetica
Monospace	Courier New, Consolas

---

5️⃣ font-weight – Boldness of Text

Defines how thick or thin the text appears.

Value	Effect
normal	Default weight
bold	Makes text bold
lighter	Makes text thinner
bolder	Makes text thicker
100-900	Numeric values (100 = thin, 900 = extra bold)

Example

p {
    font-weight: bold;
}

h1 {
    font-weight: 700;
}

---

6️⃣ font-style – Italic, Oblique or Normal

Controls the style of the text.

Value	Effect
normal	Default text style
italic	Slanted text
oblique	Similar to italic

Example

p {
    font-style: italic;
}

---

7️⃣ text-align – Aligning Text

Controls horizontal alignment of text.

Value	Effect
left	Aligns text to the left
center	Centers the text
right	Aligns text to the right
justify	Stretches text to fit the width

Example

p {
    text-align: center;
}

---

8️⃣ text-decoration – Underline, Overline, Strike

Adds decoration to text.

Value	Effect
none	Removes decoration
underline	Adds a line below the text
overline	Adds a line above the text
line-through	Adds a strikethrough
blink	(Not supported in modern browsers)

Example

p {
    text-decoration: underline;
}

---

9️⃣ text-transform – Changing Case

Controls text capitalization.

Value	Effect
uppercase	Converts text to ALL CAPS
lowercase	Converts text to lowercase
capitalize	Capitalizes first letter of each word

Example

h1 {
    text-transform: uppercase;
}

---

🔟 letter-spacing – Adjusting Space Between Letters

Defines the spacing between characters.

Value	Effect
normal	Default spacing
2px	Increases spacing by 2 pixels
-1px	Reduces spacing by 1 pixel

Example

p {
    letter-spacing: 2px;
}

---

1️⃣1️⃣ word-spacing – Adjusting Space Between Words

Defines the spacing between words.

Example

p {
    word-spacing: 5px;
}

---

1️⃣2️⃣ line-height – Controlling Line Spacing

Defines the vertical space between lines.

Value	Effect
normal	Default spacing
1.5	1.5 times the font size
2em	Twice the height of text

Example

p {
    line-height: 1.6;
}

---

🎯 Summary Cheat Sheet

Property	Effect
color	Changes text color
font-size	Sets text size
font-family	Defines font type
font-weight	Controls text thickness
font-style	Italic, oblique, or normal text
text-align	Aligns text left, center, or right
text-decoration	Adds underline, strikethrough, or overline
text-transform	Changes case (uppercase, lowercase, capitalize)
letter-spacing	Adjusts space between letters
word-spacing	Adjusts space between words
line-height	Controls space between lines

---

🎨 Final Example

p {
    color: #333;
    font-size: 18px;
    font-family: "Arial", sans-serif;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 5px;
    line-height: 1.6;
}

---

🎯 Conclusion

✅ Text styling is essential for readability & design.
✅ Use text-align: justify; for professional layouts.
✅ Avoid text-decoration: none; for links unless replacing it with a better UI.
✅ Line-height improves readability on larger text blocks.