HTML एलिमेंट में बैकग्राउंड रंग जोड़ने के लिए, आप CSS प्रॉपर्टी background-color का उपयोग कर सकते हैं।
मान लें कि आपके पास निम्नलिखित HTML मार्कअप है, और आप <body> एलिमेंट में बैकग्राउंड रंग जोड़ना चाहते हैं:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML/CSS में बैकग्राउंड रंग बदलना</title> </head> <body> <h1>यहां एक शानदार वेबसाइट है!</h1> </body> </html>बैकग्राउंड रंग जोड़ने का सबसे सरल तरीका है अपने HTML दस्तावेज़ में एक आंतरिक <style> एलिमेंट बनाना।
HTML में <head> एलिमेंट में, <style></style> टैग्स का एक सेट बनाएं। फिर आप <style> एलिमेंट में बैकग्राउंड रंग के लिए CSS स्टाइल नियम जोड़ सकते हैं।
<head> <meta charset="UTF-8"> <title>HTML/CSS में बैकग्राउंड रंग बदलना</title> <style> body { background-color: #78a8eb; } </style> </head>यह HTML और CSS कोड एक वेबपेज का परिणाम देगा जो इस तरह दिखता है!
रंग संकेतन
background-color प्रॉपर्टी के लिए #78a8eb मान हेक्साडेसिमल संकेतन में लिखा गया है, जिसे हेक्स भी कहा जाता है। यह रंग को लाल, हरे और नीले चैनलों में से प्रत्येक के लिए वर्णों के एक सेट के साथ दर्शाता है। वर्ण 0 से 9 तक की संख्याओं से लेकर A-F अक्षरों तक होते हैं। शून्य (0) सबसे कम मान है, और F सबसे अधिक मान है।
आप CSS में अन्य संकेतन का उपयोग करके भी रंगों को दर्शा सकते हैं।
उदाहरण के लिए, फंक्शनल संकेतन में, रंग को rgba() के रूप में फॉर्मेट किया जाता है। हमारे उदाहरण में बैकग्राउंड रंग इस तरह लिखा जाएगा:
background-color: rgb(120, 168, 235);या HSL (ह्यू, सैचुरेशन, लाइटनेस) संकेतन में यह इस तरह लिखा जाएगा:
background-color: hsl(215, 74%, 70%);इन तीनों तरीकों में से कोई भी आधुनिक ब्राउज़रों में स्वीकार्य है।
अप्रचलित विधियां (उपयोग न करें)
वेब मानकों के पिछले संस्करणों में, लोग HTML टैग में ही हेक्स रंग के साथ bgcolor प्रॉपर्टी का उपयोग करते थे:
<body bgcolor="#78a8eb" ></body>हालांकि, यह बैकग्राउंड रंग सेट करने का एक पुराना तरीका है। आपको अब इसका उपयोग नहीं करना चाहिए - बस रंगों को नियंत्रित करने के लिए CSS स्टाइल लिखें।
