✍️ 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

Property	Purpose	Example
font-family	Defines which font to use	font-family: Arial, sans-serif;
font-size	Sets size of text	font-size: 18px;
font-weight	Sets boldness (100–900 or keywords)	font-weight: bold;
line-height	Space between lines	line-height: 1.5;
letter-spacing	Space between characters	letter-spacing: 2px;
word-spacing	Space between words	word-spacing: 6px;
text-align	Horizontal alignment	text-align: center;
text-decoration	Adds underline, overline, or line-through	text-decoration: underline;
text-transform	Changes case of text	text-transform: uppercase;
text-indent	Indentation of first line	text-indent: 30px;
white-space	Controls wrapping and spacing	white-space: nowrap;
overflow	Controls hidden or scroll text	overflow: hidden;
text-overflow	Displays ellipsis (...) for overflow text	text-overflow: ellipsis;

🧩 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!

← Previous Next →