✍️ CSS Text & Font Properties
Last Updated: November 2025
CSS provides many text and font properties to style how text appears on a webpage — including its size, spacing, decoration, case, and font type.
You can also manage text overflow, alignment, and wrapping behavior to make your designs clean and readable.
🗣 Hinglish Tip: Ye properties text ke look aur feel ko control karti hain — jaise ki space, boldness, underline, ya uppercase karna.
Common Text & Font Properties
Example: Basic Font Styling
<!DOCTYPE html>
<html>
<head>
<style>
.text-sample {
font-family: "Poppins", Arial, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.6;
letter-spacing: 1px;
word-spacing: 4px;
}
</style>
</head>
<body>
<p class="text-sample">
CSS makes web text stylish and readable for everyone.
</p>
</body>
</html>
🗣 Hinglish Tip: font-family me ek ya zyada font likh sakte ho — agar pehla font nahi milta, dusra use hota hai.
🖋️ Text Decoration
You can decorate text with underline, overline, or line-through.
a {
text-decoration: underline;
}
.del {
text-decoration: line-through;
}
Note :💡 Modern CSS also supports text-decoration-color, text-decoration-style, and text-decoration-thickness.
🔠 Text Transform
Change text case easily:
.upper {
text-transform: uppercase;
}
.lower {
text-transform: lowercase;
}
.cap {
text-transform: capitalize;
}
🗣 Hinglish Tip: capitalize sirf har word ke pehle letter ko bada karta hai.
Line, Letter & Word Spacing
p {
line-height: 1.5; /* line gap */
letter-spacing: 2px; /* between letters */
word-spacing: 5px; /* between words */
}
💡 Perfect for adjusting readability and paragraph layout.
Text Alignment & Indent
.text {
text-align: justify;
text-indent: 40px;
}
🗣 Hinglish Tip: justify text ko dono sides se equal align karta hai (newspaper style).
🌈 Font Shorthand Property
You can combine multiple font properties in one line:
💡 Syntax: font: [style] [variant] [weight] [size]/[line-height] [family];
p {
font:
italic small-caps bold 18px/1.6 "Roboto",
sans-serif;
}
🧭 Text Overflow Handling
Long text can break layout — use overflow rules to control it.
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
🗣 Hinglish Tip: Jab text box ke bahar nikalta hai, ellipsis lagake ... dikhata hai — neat UI ke liye best!
