पाठ 12, कुल 30 में

CSS टेक्स्ट

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS बॉक्स मॉडल CSS फ़ॉन्ट्स

HTML पेज को उसके शब्द देता है; CSS तय करता है कि वे शब्द कैसे दिखेंगे। Text properties रंग, alignment, अक्षरों और लाइनों के बीच की जगह, और शब्दों के upper या lower case होने को नियंत्रित करती हैं। इनमें से कुछ सादे text को headline, notice या warning में बदल देती हैं।

Diagram — देखें, यह सब कैसे जुड़ता है

रंग और alignment

color text का रंग तय करता है। text-align तय करता है कि लाइनें कहाँ बैठेंगी: left, right, center या justify। बीच में रखा text headings और निमंत्रण पत्रों के लिए अच्छा है; body text लगभग हमेशा बाईं ओर रखा जाता है, क्योंकि बीच में रखे paragraphs पढ़ने में मुश्किल होते हैं।

Decoration और case

text-decoration text पर लाइनें खींचता है: underline, line-through (बीच से कटी लाइन, पुरानी कीमतों के लिए अच्छी), या none (links से underline हटाने के लिए)। text-transform टाइप किया हुआ text बदले बिना उसका case बदल देता है: uppercase, lowercase या capitalize (हर शब्द का पहला अक्षर बड़ा)।

Spacing और shadows

letter-spacing — अक्षरों के बीच की जगह। थोड़ी ज़्यादा जगह headings को शानदार दिखाती है।
word-spacing — शब्दों के बीच की जगह।
line-height — लाइनों के बीच की जगह। 1.6 जैसी बिना unit वाली संख्या का मतलब है "font size का 1.6 गुना" और पढ़ने लायक paragraphs के लिए सबसे अच्छा चुनाव है।
text-shadow — text के पीछे छाया: दाईं-बाईं दूरी, ऊपर-नीचे दूरी, blur, रंग। text-shadow: 2px 2px 4px grey; heading को पेज से ऊपर उठा देता है।

Syntax — text काम में

h1 {
  color: #1e3a5f;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px #cbd5e1;
}
p {
  line-height: 1.6;
}
.old-price {
  text-decoration: line-through;
  color: grey;
}

Note: text-transform: uppercase सिर्फ text का दिखावा बदलता है — टाइप किया हुआ text वैसा ही रहता है। Screen reader अब भी मूल शब्द ही पढ़ता है, इसलिए यह सीधे बड़े अक्षरों में टाइप करने से बेहतर है।

Tip: Body text को line-height 1.5 से 1.7 के बीच दें। बहुत पास-पास लाइनें आँखों को थका देती हैं; बहुत दूर-दूर लाइनें एक-दूसरे से अपना जुड़ाव खो देती हैं।

आम गलतियाँ

सँकरी columns वाले text को justify करना — browser जगहों को खींच देता है और पेज पर सफ़ेद नदियाँ बहने लगती हैं। बाईं ओर रखना ज़्यादा सुरक्षित है।
लंबे paragraphs पर text-align: center लगाना — आँख को हर लाइन की शुरुआत ढूँढनी पड़ती है। Headings को बीच में रखें, body text को नहीं।
Body text में letter-spacing जोड़ना — चौड़ी letter spacing headings के लिए होती है; paragraphs में इससे पढ़ना धीमा हो जाता है।
text-transform की जगह headings को बड़े अक्षरों में टाइप करना — टाइप किया हुआ text फिर कहीं और दोबारा इस्तेमाल करना मुश्किल हो जाता है।

याद रखें

color text को रंगता है; text-align लाइनों को जगह देता है।
text-decoration: none underline हटा देता है; line-through text को काट देता है।
text-transform दिखावा बदलता है, टाइप किया हुआ text नहीं।
पढ़ने लायक paragraphs के लिए 1.6 जैसा बिना unit वाला line-height इस्तेमाल करें।
text-shadow में पहले दाईं-बाईं दूरी, फिर ऊपर-नीचे दूरी, फिर blur, फिर रंग आता है।
तरकीब: पाठ बाईं ओर, शीर्षक बीच में — पढ़ना आसान, दिखना सुंदर।

उदाहरण समझिए

h1 { text-align: center; text-transform: uppercase; letter-spacing: 3px; } — heading बीच में बैठती है, बड़े अक्षरों में दिखती है, और अक्षरों के बीच 3px की जगह होती है, जिससे यह एक सही notice-board title जैसी लगती है।
h1 { text-shadow: 2px 2px 4px #cbd5e1; } — हल्की grey छाया, 2px दाईं और 2px नीचे, 4px blur के साथ, heading को सफ़ेद पेज से ऊपर उठा देती है।
p { line-height: 1.6; } — हर paragraph को हवादार लाइनें मिलती हैं, font size का 1.6 गुना, जिससे notice आराम से पढ़ा जाता है।
.old-price { text-decoration: line-through; } — 500 रुपये की पुरानी फ़ीस पर लाइन खिंच जाती है, और 300 रुपये की नई फ़ीस उसके बगल में खड़ी होती है।
.new-price { color: #16a34a; } — नई फ़ीस हरी है, इसलिए आँख सबसे पहले अच्छी खबर को ढूँढती है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Text - Notice Board</title>
<style>
h1 { color: #1e3a5f; text-align: center; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 4px #cbd5e1; }
p { line-height: 1.6; }
.old-price { text-decoration: line-through; color: grey; }
.new-price { color: #16a34a; }
</style>
</head>
<body>

<h1>Summer Training 2026</h1>
<p>Admissions are open for the summer batch. Classes start on 1st June. Learn HTML, CSS and JavaScript by building real websites.</p>
<p>Course fee: <span class="old-price">Rs. 500</span> <span class="new-price">Rs. 300</span></p>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।