CSS Text
Visitors किसी page पर असल में जो कुछ पढ़ते हैं उसका ज़्यादातर हिस्सा plain text होता है, यही वजह है कि text styling उन सबसे high-impact चीज़ों में से एक है जो CSS कर सकता है। कुछ अच्छी तरह चुनी गई text properties शब्दों की एक दीवार को कुछ genuinely comfortable पढ़ने लायक चीज़ में बदल सकती हैं।
CSS आपको color, alignment, decoration (जैसे underlines), casing (uppercase या capitalized), किसी paragraph की पहली line से पहले की space, letters और words के बीच की space, lines के बीच की space, और whitespace खुद कैसे handle होता है, इन सब पर control देता है।
छोटी, सावधानी से की गई text styling choices वह बड़ी वजह हैं जो cookiescursor.com जैसी site पर long-form content को थका देने वाले के बजाय पढ़ने में सुहावना बनाती हैं।
In this page:
Syntax
selector {
color: color;
text-align: left | center | right | justify;
text-decoration: none | underline;
text-transform: uppercase | lowercase | capitalize;
}color और text-align
color किसी element के text का color set करता है, और text-align उसके container के अंदर उसका horizontal alignment control करता है, जैसे left, right, center, या justify।
Note:
- Left-to-right languages में लंबे paragraphs के लिए left alignment सबसे readable choice है, center alignment को छोटी headlines या callouts के लिए बचाएँ।
- Accepted values:
- left | right | center | justify — text-align (start | end भी valid हैं)
- color — कोई भी CSS color: name, hex, rgb(), hsl()
- currentcolor — element की अपनी text color
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
text-align: justify खासतौर पर narrow columns में words के बीच uneven, distracting spacing बना सकता है।
उदाहरण: color and text-align
<style>
p {
color: navy;
text-align: center;
}
</style>
<p>Centered navy text</p>text-decoration और text-transform
text-decoration underline, overline, या line-through जैसी lines जोड़ता या हटाता है। text-transform underlying HTML content बदले बिना text की casing बदलता है, जैसे uppercase, lowercase, या capitalize।
Note:
- button text या section eyebrows जैसे छोटे labels के लिए text-transform: uppercase इस्तेमाल करें, यह छोटी doses में सबसे अच्छा पढ़ा जाता है।
- Accepted values:
- none — कोई decoration नहीं (text-decoration)
- underline — text के नीचे एक line
- overline — text के ऊपर एक line
- line-through — text के बीच से एक line
- uppercase | lowercase | capitalize | none — text-transform
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
text-decoration: none से किसी link का underline हटाना visitors के लिए उसे clickable पहचानना मुश्किल बना सकता है।
उदाहरण: text-decoration and text-transform
<style>
a {
text-decoration: underline;
}
.label {
text-transform: uppercase;
}
</style>
<a href="#">Underlined link</a>
<span class="label">short label</span>text-indent
text-indent किसी text block की पहली line से पहले space जोड़ता है, print typography का एक classic pattern जो अब भी कभी-कभी web पर stylistic effect के लिए इस्तेमाल होता है।
Note:
- text-indent एक अकेले, जानबूझकर किए गए stylistic touch के लिए अच्छा काम करता है, जैसे किसी long-form article का opening paragraph।
- Accepted values:
- length — जैसे 2em या 24px
- percentage — containing block की width के relative
- negative length — hanging indent
- each-line / hanging — optional keywords (limited support)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
किसी narrow column पर एक बड़ी text-indent value पहली line के text को edge के बहुत करीब या visually off balance धकेल सकती है।
उदाहरण: text-indent
<style>
p {
text-indent: 40px;
}
</style>
<p>This first line is indented like a print paragraph.</p>letter-spacing और word-spacing
letter-spacing individual characters के बीच की space adjust करता है, और word-spacing पूरे words के बीच की space adjust करता है, दोनों positive values (ज़्यादा space) या negative values (tighter spacing) accept करते हैं।
Note:
- एक छोटा positive letter-spacing (जैसे 0.05em) अक्सर uppercase text की legibility बेहतर करता है, जो वरना cramped महसूस हो सकता है।
- Accepted values:
- normal — font की default spacing (initial value)
- length — जैसे 2px या 0.1em (letter-spacing negative हो सकता है)
- word-spacing — words के बीच space जोड़ता है
- letter-spacing — letters के बीच space जोड़ता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
भारी negative letter-spacing text को genuinely पढ़ना मुश्किल बना सकता है, इसे कम मात्रा में और सिर्फ बड़े display text पर इस्तेमाल करें।
उदाहरण: letter-spacing and word-spacing
<style>
h1 {
letter-spacing: 0.05em;
}
p {
word-spacing: 8px;
}
</style>
<h1>SPACED HEADING</h1>
<p>Words with extra space between them</p>line-height और white-space
line-height किसी text line द्वारा occupy की गई vertical space set करता है, जो सीधे असर करता है कि कोई paragraph कितना readable महसूस होता है। white-space control करता है कि browser source text में extra spaces, tabs, और line breaks को कैसे handle करता है।
Note:
- body text के लिए 1.4 और 1.6 के बीच एक line-height (unitless, यानी font size का एक multiple) एक comfortable, widely recommended range है।
- Accepted values:
- normal — browser default, लगभग 1.2 (initial value)
- number — font size को multiply करता है, जैसे 1.5
- length — जैसे 24px
- percentage — font size के relative
- white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
white-space: nowrap text को बिल्कुल wrap नहीं होने देता, जो narrow screens पर उसे अपने container से overflow करा सकता है।
उदाहरण: line-height and white-space
<style>
p {
line-height: 1.5;
}
.nowrap {
white-space: nowrap;
}
</style>
<p>Comfortable line height for reading long paragraphs of text.</p>
<p class="nowrap">This text will never wrap to a new line</p>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- body text को justify करना (text-align: justify), जो words के बीच uneven, distracting gaps बना सकता है।
- गलती से line-height को एक unitless छोटा number set करना, जिससे text की lines एक-दूसरे के बहुत करीब आ जाती हैं।
- links से text-decoration से underlines हटाना बिना कोई और visual cue जोड़े कि वे clickable हैं।
चैप्टर सारांश
- color, text-align, और text-decoration किसी text का color, horizontal alignment, और underline जैसी lines control करते हैं।
- text-transform casing बदलता है, और text-indent किसी block की पहली line से पहले space जोड़ता है।
- letter-spacing, word-spacing, और line-height text की lines के अंदर और उनके बीच की space fine-tune करते हैं।
ब्राउज़र सपोर्ट
यहाँ बताई गई सभी standard CSS text properties हर modern browser में supported हैं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: