CSS रंग
आप तत्व चुन सकते हैं। अब रंग भरें। पहली रंग-कौशल सरल है: टेक्स्ट रंग color प्रॉपर्टी से सेट करें। बैकग्राउंड, ग्रेडिएंट और पूरी रंग-गणित बाद में — आज पठनीय, दोबारा इस्तेमाल होने वाला फ़ोरग्राउंड रंग।
color क्या करता है?
color प्रॉपर्टी फ़ोरग्राउंड रंग सेट करती है — मुख्यतः अक्षरों का रंग। ब्राउज़र उसी गणना किए रंग को currentColor वाले कामों के लिए भी इस्तेमाल करता है (बॉर्डर, कुछ SVG, सजावट)। यह टेक्स्ट के पीछे बॉक्स नहीं भरता; वह background-color है (अगले मॉड्यूल)।
नाम वाले रंग एक नज़र में
CSS में कई नाम वाले रंग हैं — जैसे teal और navy। पहले एक छोटी रोज़मर्रा सूची याद करें। सटीक hex और rgb() रंग मान पाठ में आएंगे।
📊 रोज़मर्रा के नाम वाले रंग
| नाम | अहसास | आम उपयोग |
|---|---|---|
black / white |
अधिकतम कंट्रास्ट | बॉडी टेक्स्ट या पेज कैनवास (सावधानी से) |
navy / teal |
शांत ब्रांड एक्सेंट | लिंक, शीर्षक, नोट |
maroon / crimson |
मज़बूत चेतावनी या ज़ोर | त्रुटियाँ, सेल लेबल (कम) |
gray / silver |
शांत द्वितीयक टेक्स्ट | कैप्शन, हल्के लेबल |
transparent |
पूरी तरह पारदर्शी | प्रॉपर्टी हटाए बिना बॉर्डर छिपाना |
नाम से टेक्स्ट रंग
सामान्य declaration लिखें: प्रॉपर्टी color, मान एक नाम वाला रंग। पैराग्राफ़ से शुरू करें ताकि पेज जानबूझकर लगे।
पैराग्राफ़ टेक्स्ट पर नाम वाला रंग
cssp {
color: teal;
}नतीजा कैसे पढ़ें?
हर मैचिंग <p> अक्षर teal में खींचता है। प्रॉपर्टी नाम हमेशा color है — न text-color, न font-color।
शीर्षक बॉडी से अलग हो सकता है
अक्सर गहरा शीर्षक और शांत पैराग्राफ़ चाहिए। अलग सिलेक्टर, अलग रंग।
शीर्षक एक्सेंट बनाम बॉडी टेक्स्ट
cssh1 {
color: navy;
}
.lead {
color: gray;
}डिज़ाइन आदत
ऊँचे कंट्रास्ट वाले शीर्षक स्कैन आसान करते हैं। नरम द्वितीयक टेक्स्ट कैप्शन को चिल्लाने से रोकता है। फिर भी पढ़ने लायक कंट्रास्ट रखें।
रंग इनहेरिट होता है
बच्चे पैरेंट का color लेते हैं जब तक खुद न सेट करें। इसलिए कंटेनर पर रंग पूरे टेक्स्ट ब्लॉक को थीम कर सकता है।
नोट ब्लॉक पर इनहेरिटेड रंग
css.note {
color: maroon;
}क्या इनहेरिट होता है?
<div class="note">…</div> के अंदर पैराग्राफ़ और span maroon रहते हैं जब तक मज़बूत नियम न बदले। इनहेरिटेंस फीचर है — बग नहीं।
currentColor टेक्स्ट से मेल खाता है
currentColor का मतलब «तत्व का गणना किया color लो।» जब बॉर्डर या आइकन टेक्स्ट के साथ चलना चाहिए तो काम आता है।
currentColor से बॉर्डर टेक्स्ट का अनुसरण करता है
css.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}क्यों मेहनत?
color एक बार बदलें — बॉर्डर पीछे आता है। सिंक रखने के लिए दूसरा हार्ड-कोडेड teal नहीं।
थीम्ड कार्ड (सब साथ)
कंटेनर रंग, बच्चे पर शांत override, और currentColor एक्सेंट मिलाएँ।
override + currentColor वाला कार्ड थीम
css.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color बैकग्राउंड नहीं है
शुरुआती अक्सर color लिखते हैं जब मतलब टेक्स्ट के पीछे भराव होता है। पहले दिन से अलग रखें:
color→ टेक्स्ट (फ़ोरग्राउंड)background-color→ सामग्री के पीछे रंगी बॉक्स (जल्द)
खुद आज़माएँ
- पेज: शीर्षक,
<p class="lead">, और छोटे पैराग्राफ़ वाला<div class="note">। h1 { color: navy; },p { color: teal; },.note { color: maroon; }— हर क्षेत्र जाँचें।- छोटे span पर
.badge { color: teal; border: 2px solid currentColor; }— बॉर्डर टेक्स्ट से मेल खाना चाहिए। .cardमें कार्ड पर navy और.mutedपरcolor: gray— उस लाइन के लिए बच्चे का override जीते।- वैकल्पिक: सजावटी लेबल पर
color: transparent— टेक्स्ट गायब, लेआउट जगह बनी रहती है।
आम गलतियाँ
colorसे बॉक्स बैकग्राउंड रंगना — बाद मेंbackground-color- नाम गढ़ना (
lightishblue) — असली CSS कीवर्ड या hex/rgb का इंतज़ार - हर प्रॉपर्टी को
colorजैसा इनहेरिट समझना — कई नहीं करतीं - नाम वाले रंग पकड़ने से पहले लंबे hex पर कूदना
- कंट्रास्ट नज़रअंदाज़ (सफ़ेद पर हल्का ग्रे) — सुंदर पर अपठनीय
सार
colorफ़ोरग्राउंड टेक्स्ट रंग सेट करता है- नाम वाले रंग (
teal,navy,maroon, …) शुरुआत के लिए काफ़ी - बच्चे
colorइनहेरिट करते हैं जब तक override न करें currentColorगणना किए टेक्स्ट रंग को बॉर्डर आदि के लिए दोबारा इस्तेमाल करता है- गहरे फ़ॉर्मैट (hex, rgb, hsl) रंग मान के लिए; बैकग्राउंड बाद के पाठों में
- शीर्षक / lead / note से अभ्यास करें जब तक प्रॉपर्टी अपने आप लगे
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी