CSS background-color प्रॉपर्टी एक टेक्स्ट एलिमेंट पर कलर लागू करती है। आप background-color प्रॉपर्टी के साथ एक CSS बिल्ट-इन कलर कीवर्ड, एक हेक्साडेसिमल वैल्यू, या कोई अन्य कलर वैल्यू निर्दिष्ट कर सकते हैं। इस प्रॉपर्टी का सिंटैक्स है: color: yourcolor;।
CSS फॉन्ट कलर कैसे लागू करें
वेबसाइट पर टेक्स्ट के कलर और बैकग्राउंड कलर को सेट करना वेब डिज़ाइन का एक अनिवार्य हिस्सा है।
यहीं CSS color और background-color प्रॉपर्टीज काम आती हैं। color प्रॉपर्टी आपको HTML टेक्स्ट का कलर सेट करने देती है। background-color प्रॉपर्टी आपको टेक्स्ट बैकग्राउंड कलर्स को परिभाषित करने देती है।
यह ट्यूटोरियल, उदाहरणों के साथ, CSS में टेक्स्ट का कलर कैसे सेट करें, पर चर्चा करेगा। फिर हम बात करेंगे कि टेक्स्ट एलिमेंट का बैकग्राउंड कलर कैसे सेट करें।
CSS फॉन्ट कलर
एक CSS फॉन्ट कलर color प्रॉपर्टी का उपयोग करके सेट किया जाता है। color प्रॉपर्टी टेक्स्ट का कलर सेट करती है, एलिमेंट के बैकग्राउंड का नहीं। आप CSS कलर कीवर्ड्स या हेक्साडेसिमल स्ट्रिंग्स जैसे कलर वैल्यूज का उपयोग करके कलर सेट कर सकते हैं।
color प्रॉपर्टी का सिंटैक्स है:
p { color: red; }
यह नियम एक HTML डॉक्यूमेंट में सभी <p> टैग्स के कलर को रेड पर सेट करता है।
हमने एक CSS कलर कीवर्ड का उपयोग किया। ये कीवर्ड सुविधाजनक हैं यदि आप एक स्टैंडर्ड कलर को संदर्भित करना चाहते हैं, जैसे "red" या "paleblue"। लेकिन, ये कीवर्ड स्पेक्ट्रम पर हर कलर का वर्णन नहीं करते। यदि आप एक विशिष्ट कलर का उपयोग करना चाहते हैं, तो आप दूसरे प्रकार के कलर लेबल का उपयोग करना चाह सकते हैं।
color प्रॉपर्टी निम्न में से किसी भी एक मान को स्वीकार करती है:
| मान | विवरण | उदाहरण |
| कलर नाम | एक कलर नाम | blue, hotpink |
| HEX कलर | एक हेक्साडेसिमल कलर। आइडेंटिफायर्स छह कैरेक्टर्स लंबे होते हैं। | #f7f7f7, #0000ff |
| RGB कलर | RGB का मतलब रेड, ग्रीन, और ब्लू है। | rgb(0, 50, 28), rgb(0, 0, 255) |
| HSL कलर | HSL का मतलब ह्यू, सैचुरेशन, और लाइटनेस है। | hsl(0, 50%, 50%), hsl(180, 50%, 25%) |
डिफ़ॉल्ट रूप से, एक वेब पेज द्वारा उपयोग किया जाने वाला टेक्स्ट कलर वेब पेज पर <body> टैग पर लागू होने वाला टेक्स्ट कलर है। जब तक अन्यथा निर्दिष्ट न हो, यह ब्लैक होगा।
आप अपनी स्टाइल शीट में लिंक कलर्स को परिभाषित करने के लिए color प्रॉपर्टी का उपयोग कर सकते हैं।
आइए एक उदाहरण के माध्यम से चलते हैं कि color प्रॉपर्टी कैसे काम करती है।
फॉन्ट कलर CSS बदलें: एक उदाहरण
मान लीजिए हम एक स्थानीय ग्रॉसरी स्टोर, पीटरसन एंड संस के लिए एक वेबसाइट डिज़ाइन कर रहे हैं। मालिक चाहते हैं कि वेबसाइट टेक्स्ट के एक निश्चित ब्लॉक को ग्रे फॉन्ट में प्रदर्शित करे। हम इसे निम्न कोड का उपयोग करके सेट कर सकते हैं:
<html> <p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.</p> <style> p { color: gray; }
हमारा कोड रिटर्न करता है: 
ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हम पीटरसन एंड संस ग्रॉसरी स्टोर का वर्णन करने वाले टेक्स्ट के एक पैराग्राफ को परिभाषित करने के लिए एक <p> HTML टैग का उपयोग करते हैं। फिर, हमारे CSS कोड में, हम एक स्टाइल बनाते हैं जो सभी <p> टैग्स के टेक्स्ट कलर को ग्रे पर सेट करता है। ऐसा करने के लिए, हम एक कलर नाम वैल्यू ("gray") का उपयोग करते हैं।
यदि हम "gray" के स्थान पर "rgb(128, 128, 128)" निर्दिष्ट करना चाहते थे तो हम एक RGB कलर वैल्यू को संदर्भित कर सकते थे। वैकल्पिक रूप से, हम एक हेक्साडेसिमल वैल्यू या HSL वैल्यू का उपयोग करके टेक्स्ट कलर को ग्रे पर सेट कर सकते थे।
हम अपने स्टाइल्स के लिए CSS फाइल का उपयोग नहीं कर रहे हैं। हमारे CSS स्टाइल्स हमारे HTML डॉक्यूमेंट में <style> टैग के भीतर संलग्न हैं।
CSS टेक्स्ट बैकग्राउंड कलर
CSS background-color प्रॉपर्टी एक एलिमेंट का बैकग्राउंड कलर सेट करती है। background-color प्रॉपर्टी पहले चर्चा किए गए किसी भी कलर वैल्यू (कलर नाम, HEX, RGB, HSL) को स्वीकार करती है। यह प्रॉपर्टी टेक्स्ट का बैकग्राउंड कलर सेट कर सकती है।
background-color प्रॉपर्टी का सिंटैक्स है:
p { background-color: blue; }
यह कोड एक पेज पर सभी <p> टैग्स के लिए ब्लू बैकग्राउंड कलर सेट करता है।
CSS टेक्स्ट बैकग्राउंड कलर उदाहरण
मान लीजिए हम ऊपर दिए गए उदाहरण में टेक्स्ट के पैराग्राफ में वाक्यों में से एक पर ऑरेंज बैकग्राउंड कलर जोड़ना चाहते हैं।
हम जिस वाक्य को हाइलाइट करना चाहते हैं वह है "Today, Peterson and Sons operates five stores across the Seattle area." और, जैसा पहले, हम पैराग्राफ में सभी टेक्स्ट को ग्रे में दिखाना चाहते हैं। हम निम्न कोड का उपयोग करके इस टेक्स्ट डेकोरेशन को लागू कर सकते हैं:
<html> <p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. <span>Today, Peterson and Sons operates five stores across the Seattle area.</span></p> <style> p { color: gray; } span { background-color: orange; }
हमारा कोड रिटर्न करता है: ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमारी HTML फाइल में, हमने <p> टैग्स के भीतर उस टेक्स्ट को संलग्न करके टेक्स्ट के एक पैराग्राफ को परिभाषित किया। फिर, हमने अंतिम वाक्य को HTML <span> टैग में संलग्न किया। ऐसा करने से हमें अपने कोड में केवल उस विशेष वाक्य पर एक विशिष्ट स्टाइल लागू करने की अनुमति मिली।
हमारे CSS कोड में, हमने दो नियम निर्दिष्ट किए। पहला नियम <p> टैग्स के भीतर सभी टेक्स्ट का कलर ग्रे पर सेट करता है। दूसरा नियम <span> टैग्स के भीतर सभी टेक्स्ट का बैकग्राउंड कलर ऑरेंज पर सेट करता है।
जैसा कि आप ऊपर देख सकते हैं, हमारे कोड में अंतिम वाक्य - जो <span> टैग्स में संलग्न है - का ऑरेंज बैकग्राउंड कलर है। यह हमारे द्वारा लिखे गए दूसरे स्टाइल नियम का परिणाम है।
निष्कर्ष
CSS color प्रॉपर्टी आपको वेब पेज पर टेक्स्ट का कलर सेट करने देती है। background-color प्रॉपर्टी आपको वेब पेज पर टेक्स्ट के लिए बैकग्राउंड कलर सेट करने देती है।
इस ट्यूटोरियल ने, उदाहरणों के साथ, इन कार्यों को पूरा करने के तरीके पर चर्चा की। अब आप एक एक्सपर्ट वेब डिज़ाइनर की तरह फॉन्ट कलर्स और टेक्स्ट बैकग्राउंड कलर्स बदलने के लिए आवश्यक कौशल से लैस हैं!
क्या आप HTML के बारे में अधिक जानने में रुचि रखते हैं? हमारा HTML सीखने का गाइड देखें। आपको इस गाइड में एक्सपर्ट लर्निंग टिप्स और शीर्ष कोडिंग संसाधनों पर मार्गदर्शन मिलेगा।
