सीएसएस के साथ वेबसाइट फ़ॉन्ट रंग कैसे बदलें

CSS आपको आपके द्वारा बनाए और प्रबंधित किए जाने वाले वेब पेजों पर टेक्स्ट की उपस्थिति पर नियंत्रण देता है। इस गाइड में, हम आपको दिखाते हैं कि कलर कीवर्ड, हेक्साडेसिमल कलर कोड या RGB कलर नंबरों का उपयोग करके CSS में फॉन्ट कलर कैसे बदलें।

फ़ॉन्ट रंग बदलने के लिए सीएसएस शैलियों का उपयोग कैसे करें

रंग मूल्यों को रंग कीवर्ड, हेक्साडेसिमल रंग संख्या या आरजीबी रंग संख्या के रूप में व्यक्त किया जा सकता है। इस पाठ के लिए, आपके पास CSS परिवर्तन देखने के लिए एक HTML दस्तावेज़ की आवश्यकता होगी और a अलग सीएसएस फ़ाइल जो उस दस्तावेज़ से जुड़ी है. हम विशेष रूप से अनुच्छेद तत्व को देखने जा रहे हैं।

फ़ॉन्ट रंग बदलने के लिए रंग कीवर्ड का उपयोग करें

अपनी HTML फ़ाइल में प्रत्येक अनुच्छेद के लिए टेक्स्ट का रंग बदलने के लिए, बाहरी स्टाइल शीट पर जाएँ और टाइप करें पी { }. इसे रखो रंग शैली में संपत्ति, उसके बाद एक बृहदान्त्र, जैसे पी {रंग:}. फिर, संपत्ति के बाद अपना रंग मान जोड़ें, इसे अर्धविराम से समाप्त करें। इस उदाहरण में, पैराग्राफ टेक्स्ट को काले रंग में बदल दिया गया है:

पी {
रंग काला;
}

फ़ॉन्ट रंग बदलने के लिए हेक्साडेसिमल मानों का उपयोग करें

टेक्स्ट को लाल, हरे, नीले, या किसी अन्य मूल रंग में बदलने के लिए रंग कीवर्ड का उपयोग करने से आपको वह सटीकता नहीं मिलेगी जो आप उन रंगों के विभिन्न रंगों को बनाते समय देख रहे होंगे। हेक्साडेसिमल मानों के लिए यही है।

इस सीएसएस शैली का उपयोग आपके अनुच्छेदों को काले रंग में रंगने के लिए किया जा सकता है क्योंकि हेक्स कोड #000000 काले रंग में अनुवाद करता है। आप उस हेक्स मान के साथ शॉर्टहैंड का उपयोग भी कर सकते हैं और इसे उसी परिणाम के साथ #000 के रूप में लिख सकते हैं।

पी {
रंग: #000000;
}

हेक्स मान अच्छी तरह से काम करते हैं जब आपको ऐसे रंग की आवश्यकता होती है जो केवल काला या सफेद न हो। उदाहरण के लिए, यह हेक्स कोड आपको नीले रंग का एक बहुत ही विशिष्ट शेड सेट करने की क्षमता देता है - एक मध्य-श्रेणी, स्लेट जैसा नीला:

पी {
रंग: #2f5687;
}

हेक्स एक रंग के आरजीबी (लाल, हरा, नीला) मानों को आधार-सोलह मानों के साथ अलग से सेट करके काम करता है। इसलिए उनमें अक्षर होते हैं ए के माध्यम से एफ अंकों के अलावा 0 के माध्यम से 9.

प्रत्येक रंग, लाल, हरा और नीला, अपना दो अंकों का मान प्राप्त करता है। 00 न्यूनतम संभव मूल्य है, जबकि सीमांत बल उच्चतम है। रंगों को आरजीबी क्रम में हेक्स में सूचीबद्ध किया गया है, इसलिए पहले दो अंक लाल मान का प्रतिनिधित्व करते हैं और इसी तरह।

फ़ॉन्ट रंग बदलने के लिए RGBA रंग मानों का उपयोग करें

अंत में, आप फ़ॉन्ट रंगों को संपादित करने के लिए RGBA रंग मानों का उपयोग कर सकते हैं। RGCA सभी आधुनिक ब्राउज़रों में समर्थित है, इसलिए आप इस विश्वास के साथ इन मानों का उपयोग कर सकते हैं कि यह अधिकांश दर्शकों के लिए काम करेगा, लेकिन आप एक आसान फ़ॉलबैक भी सेट कर सकते हैं।

यह RGBA मान ऊपर निर्दिष्ट स्लेट नीले रंग के समान है:

पी {
रंग: आरजीबीए (47,86,135,1);
}

पहले तीन मान लाल, हरा और नीला मान सेट करते हैं और अंतिम संख्या पारदर्शिता के लिए अल्फा सेटिंग है। अल्फ़ा सेटिंग को 1 से 100 प्रतिशत पर सेट किया गया है, इसलिए इस रंग में कोई पारदर्शिता नहीं है। यदि आप उस मान को दशमलव संख्या पर सेट करते हैं, जैसे .85, तो यह 85 प्रतिशत अस्पष्टता में बदल जाता है और रंग थोड़ा पारदर्शी होगा।

यदि आप अपने रंग मूल्यों को बुलेटप्रूफ करना चाहते हैं, तो इस सीएसएस कोड को कॉपी करें:

पी {
रंग: #2f5687;
रंग: आरजीबीए (47,86,135,1);
}

यह सिंटैक्स पहले हेक्स कोड सेट करता है और फिर उस मान को RGBA नंबर से अधिलेखित कर देता है। इसका मतलब है कि कोई भी पुराना ब्राउज़र जो RGBA का समर्थन नहीं करता है, उसे पहला मान मिलेगा और दूसरे को अनदेखा कर देगा।

यह ध्यान रखना महत्वपूर्ण है कि रंग संपत्ति सीएसएस में किसी भी HTML टेक्स्ट तत्व पर काम करती है। उदाहरण के लिए, आप अपने सभी लिंक रंग बदल सकते हैं। यह उदाहरण आपके लिंक को चमकदार हरा बना देगा:

ए {
रंग: #16c616;
}

यह एक साथ कई तत्वों के साथ भी काम करता है। आप प्रत्येक शीर्षक स्तर को एक साथ सेट कर सकते हैं। उदाहरण के लिए, यह आपके सभी शीर्षक तत्वों को मध्यरात्रि नीले रंग में सेट कर देगा:

एच1, एच2, एच3, एच4, एच5, एच6 {
रंग: #020833;
}

अपने रंगों के लिए हेक्स या आरजीबीए मूल्यों के साथ आना हमेशा आसान नहीं होता है। अधिकांश वेब डिज़ाइनर सटीक कोड उत्पन्न करने के लिए फ़ोटोशॉप या जीआईएमपी जैसे छवि संपादन प्रोग्राम का उपयोग करेंगे। आप सुविधाजनक रंग बीनने वाले टूल ऑनलाइन भी पा सकते हैं, जैसे w3schools से यह एक.

HTML पेज को स्टाइल करने के अन्य तरीके

HTML दस्तावेज़ के भीतर एक बाहरी स्टाइल शीट, एक आंतरिक स्टाइल शीट, या इनलाइन स्टाइल के साथ फ़ॉन्ट रंग बदला जा सकता है। हालांकि, सर्वोत्तम अभ्यास यह निर्देश देते हैं कि आपको अपनी सीएसएस शैलियों के लिए बाहरी स्टाइल शीट का उपयोग करना चाहिए।

एक आंतरिक स्टाइल शीट, जो सीधे आपके दस्तावेज़ के "शीर्ष" में लिखी गई शैलियाँ हैं, आमतौर पर केवल छोटी, एक-पृष्ठ वेबसाइटों के लिए उपयोग की जाती हैं। इनलाइन शैलियों से बचा जाना चाहिए क्योंकि वे पुराने "फ़ॉन्ट" टैग के समान हैं जिन्हें हमने कई साल पहले निपटाया था। उन इनलाइन शैलियों से फ़ॉन्ट शैली को प्रबंधित करना बहुत कठिन हो जाता है क्योंकि आपको उन्हें इनलाइन शैली के प्रत्येक उदाहरण में बदलना पड़ता है।