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

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

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

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

फ़ॉन्ट रंग बदलने के लिए शैलियों को जोड़ना

इस उदाहरण के लिए, आपको अपने पेज मार्कअप के लिए एक HTML दस्तावेज़ और उस दस्तावेज़ से जुड़ी एक अलग सीएसएस फ़ाइल की आवश्यकता होगी। एचटीएमएल दस्तावेज़ संभवतः इसमें कई तत्व बना देगा। इस लेख के प्रयोजन के लिए हम जिस चिंतित हैं, वह अनुच्छेद तत्व है।

यहां बताया गया है कि अपनी बाहरी स्टाइल शीट का उपयोग करके अनुच्छेद टैग के अंदर टेक्स्ट का फ़ॉन्ट रंग कैसे बदलें।

रंग मान रंग कीवर्ड, आरजीबी रंग संख्या, या हेक्साडेसिमल रंग संख्या के रूप में व्यक्त किया जा सकता है।

1. अनुच्छेद टैग के लिए शैली विशेषता जोड़ें:
   1. पी {}
2. शैली में रंग संपत्ति रखें। उस संपत्ति के बाद एक कोलन रखें:
   1. पी {रंग:}
3. फिर संपत्ति के बाद अपना रंग मूल्य जोड़ें। अर्ध-कॉलन के साथ उस मान को समाप्त करना सुनिश्चित करें:
   1. पी {रंग: काला;}

आपके पृष्ठ में पैराग्राफ अब काला होंगे।

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

पी {रंग: # 000000; }

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

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

पी {रंग: # 2 एफ 5687; }

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

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

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

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

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

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

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