CSS टेक्स्ट
आपने बॉक्स का आकार तय किया और overflow नियंत्रित किया। अब अंदर के शब्दों को आकार दें। CSS टेक्स्ट गुण संरेखण, रेखांकन, अक्षर केस, अंतराल और पंक्ति ऊँचाई संभालते हैं — अभी font परिवार बदले बिना (वह अगला पाठ है)।
रोज़ के टेक्स्ट औज़ार
📊 आम टेक्स्ट गुण
| गुण | रोज़ का काम |
|---|---|
text-align |
पंक्ति में टेक्स्ट संरेखित करता है: left, right, center, justify |
text-decoration |
रेखांकन, ऊपर की रेखा या काट रेखा जोड़ता/हटाता है |
text-transform |
अक्षर केस बदलता है: uppercase, lowercase, capitalize |
line-height |
हर पंक्ति की ऊँचाई सेट करता है — पठनीय पैराग्राफ की कुंजी |
letter-spacing |
अक्षरों के बीच जगह समायोजित करता है |
टेक्स्ट संरेखित करें
text-align टेक्स्ट को उसके कंटेनिंग ब्लॉक की क्षैतिज अक्ष पर रखता है।
शीर्षक केंद्र में
css.hero-title {
text-align: center;
color: #0f172a;
}सजावट — रेखांकन और साथी
text-decoration टेक्स्ट पर रेखाएँ खींचता है। लिंक अक्सर रेखांकित होते हैं; none से हटाएँ, या डिज़ाइन चाहे तो underline / line-through जोड़ें।
सजावट नमूने
css.link-quiet {
text-decoration: none;
color: #2563eb;
}
.sale {
text-decoration: line-through;
color: #64748b;
}
.note {
text-decoration: underline;
}अक्षर केस बदलें
text-transform HTML टेक्स्ट दोबारा लिखे बिना अक्षरों का रूप बदलता है।
केस रूपांतरण
css.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}
.city {
text-transform: capitalize;
}पठनीय पैराग्राफ के लिए पंक्ति ऊँचाई
line-height पंक्तियों की ऊर्ध्वाधर लय नियंत्रित करता है। 1.5 जैसे इकाईरहित मान फ़ॉन्ट आकार के साथ स्केल होते हैं और बॉडी टेक्स्ट के लिए शांत विकल्प हैं।
आरामदायक पंक्ति ऊँचाई
css.article p {
line-height: 1.6;
color: #334155;
}अक्षर अंतराल — हल्का स्पर्श
थोड़ा letter-spacing छोटा शीर्षक खोल सकता है। बॉडी पैराग्राफ आमतौर पर प्राकृतिक रखें जब तक डिज़ाइन सच में न चाहे।
हल्के ट्रैकिंग वाला शीर्षक
css.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}खुद आज़माएँ
text-align: centerसेh1केंद्र करें।text-decoration: noneसे लिंक रेखांकन हटाएँ; चाहें तो hover पर वापस।text-transform: uppercaseसे छोटी लेबल बड़े अक्षर करें।- पैराग्राफ
line-heightको1.6करें और1.2से तुलना करें। - शीर्षक को छोटा
letter-spacingदें — फिर जाँचें कि पढ़ने योग्य रहे।
आम गलतियाँ
text-align: centerसे पूरे ब्लॉक लेआउट केंद्र की उम्मीद (यह लेआउट काम है, सिर्फ टेक्स्ट नहीं)- डिज़ाइन शांत लिंक चाहे तो भी हर लिंक रेखांकित छोड़ना — या बिना अन्य संकेत रेखांकन हटाना
- यहाँ font-family और font-size लाना (Fonts पाठ का काम)
- लंबे पैराग्राफ पर विशाल
letter-spacing(पढ़ना कठिन) - टेक्स्ट overflow एलिप्सिस औज़ारों को इन मूल बातों से मिलाना (बाद में)
सार
text-alignटेक्स्ट को बाएँ, दाएँ, केंद्र या justify करता हैtext-decorationरेखांकन जैसी रेखाएँ जोड़ता/हटाता हैtext-transformHTML संपादन के बिना केस बदलता हैline-heightपैराग्राफ पठनीयता गढ़ता है- हल्का
letter-spacingछोटे शीर्षक सजा सकता है - फ़ॉन्ट अगले हैं; यह पाठ टेक्स्ट कैसे बैठता और पढ़ा जाता है पर रहता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी