Typography & Text
Text Styling
align, decoration, transform, spacing
💡 Text styling properties ek writer ke tools hain — kaha align karna hai (jaise center-aligned poster), underline/strikethrough (jaise editing marks), UPPERCASE/lowercase (jaise emphasis), spacing (jaise letters ke beech breathing room).
text-align (left/center/right/justify) — horizontal alignment. text-decoration (underline/line-through/none — links se underline hataने ke liye common). text-transform (uppercase/lowercase/capitalize — CSS se hi text ka case badal do, HTML content change kiye bina). letter-spacing/word-spacing — characters/words ke beech extra gap.
h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
a {
text-decoration: none; /* links ka default underline hataना */
}
.label {
text-transform: capitalize; /* "hello world" -> "Hello World" */
}
p {
line-height: 1.6; /* lines ke beech spacing — readability improve karta hai */
}✏️
Text styling properties ek writer ke tools hain — kaha align karna hai (jaise center-aligned poster), underline/strikethrough (jaise editing marks), UPPERCASE/lowercase (jaise emphasis), spacing (jaise letters ke beech breathing room).
1 / 2
⚡ झट से Recap
- text-align = horizontal alignment (left/center/right/justify)
- text-transform = case control bina HTML content badle
- line-height = lines ke beech spacing, readability ke liye zaroori
इस page में (2 subtopics)
white-space control karta hai browser extra spaces/line-breaks ko kaise handle kare — normal (default, collapse), nowrap (text wrap nahi hoga, ek line mein rahega), pre (exact spacing preserve, jaise HTML ka <pre> tag).
.no-wrap {
white-space: nowrap; /* text ellipsis ke saath common combo */
overflow: hidden;
text-overflow: ellipsis; /* "Long text..." jaisa truncation */
}Tip: white-space: nowrap + overflow: hidden + text-overflow: ellipsis ek bahut common combo hai — long text ko "..." se truncate karne ke liye, jaise card titles ya table cells mein.
text-shadow text par shadow/glow effect deta hai — horizontal offset, vertical offset, blur radius, color specify karte ho. Subtle depth ya dramatic effects dono ke liye use hota hai.
.subtle-shadow {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* subtle depth */
}
.glow {
text-shadow: 0 0 10px cyan; /* glowing effect */
}Tip: Multiple shadows comma se combine karke layered effects bhi bana sakte ho — jaise ek 3D-jaisa text effect, multiple offset shadows stack karke.