CSS के साथ अपनी वेबसाइट के टेक्स्ट का रंग कैसे बदलें

अपनी वेबसाइट पर नियंत्रण रखना वेब डिज़ाइन का एक महत्वपूर्ण तत्व है। एक आदर्श दुनिया में, आपको तैयार उत्पाद से समझौता किए बिना अपनी साइट के डिजाइन के हर पहलू को बदलने में सक्षम होना चाहिए।

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

CSS के साथ वेबसाइट टेक्स्ट का रंग बदलना

CSS को सावधानीपूर्वक डिजाइन किया गया है ताकि यह सुनिश्चित किया जा सके कि यह डिजाइनरों को उनकी वेबसाइट परियोजनाओं पर अधिकार देता है। आपकी वेबसाइट पर CSS के साथ टेक्स्ट का रंग बदलना अविश्वसनीय रूप से आसान है; इसे करने के लिए आपको बस एक नियम की जरूरत है।

रंग नीला;

बेशक, हालांकि, CSS नियम अपने आप बहुत अच्छी तरह से काम नहीं करते हैं। आपको यह सुनिश्चित करने के लिए तत्व वर्गों, आईडी और पहचानकर्ताओं के साथ जोड़ना होगा कि वेब ब्राउज़र जानते हैं कि शैली किस पर लागू होती है। आप इस नियम के उदाहरण देख सकते हैं जिनका उपयोग H1 शीर्षक, P अनुच्छेद और नीचे एक बटन के साथ किया जा रहा है।

h1 {रंग: नीला; }
पी {रंग: लाल; }
बटन {रंग: लाल; }

इससे आपको एक बुनियादी समझ मिलनी चाहिए कि सीएसएस के साथ अपनी वेबसाइट के टेक्स्ट का रंग बदलने के लिए क्या करना चाहिए। इसमें आमतौर पर इससे अधिक समय लगता है, खासकर यदि आप अपनी वेबसाइट पर अलग-अलग टेक्स्ट को अलग-अलग रंग देना चाहते हैं।

सम्बंधित: CSS बॉक्स मॉडल को उदाहरणों के साथ समझाया गया

सही CSS क्लास ढूँढना

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

इंस्पेक्टर खोलना

बाजार में प्रत्येक ब्राउज़र में इंस्पेक्टर खोलना अलग है। आपको एक शुरुआत देने के लिए हमने नीचे कुछ सबसे लोकप्रिय ब्राउज़रों को शामिल किया है:

• गूगल क्रोम: CTRL + Shift + C या मेनू डॉट्स > अधिक उपकरण > डेवलपर उपकरण
• माइक्रोसॉफ्ट बढ़त: CTRL + Shift + C या मेनू डॉट्स > अधिक उपकरण > डेवलपर उपकरण
• मोज़िला फ़ायरफ़ॉक्स: CTRL + Shift + C या मेनू डॉट्स > अधिक उपकरण > वेब डेवलपर टूल
• एप्पल सफारी: पसंद > उन्नत > मेन्यू बार में डेवलप मेन्यू दिखाएं और फिर विकसित करना > वेब इंस्पेक्टर दिखाएँ

सही CSS टेक्स्ट स्टाइल ढूँढना

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

एक उदाहरण के रूप में, हम MakeUseOf प्रोग्रामिंग सेक्शन में मुख्य हेडर के लिए उपयोग की जा रही CSS टेक्स्ट स्टाइल को खोजने और बदलने जा रहे हैं। आप इस प्रक्रिया को उस तत्व का निरीक्षण करके शुरू कर सकते हैं जिसे बदलने की जरूरत है।

• गूगल क्रोम: दाएँ क्लिक करें > निरीक्षण
• माइक्रोसॉफ्ट बढ़त: दाएँ क्लिक करें > निरीक्षण
• मोज़िला फ़ायरफ़ॉक्स: दाएँ क्लिक करें > निरीक्षण या क्यू
• एप्पल सफारी: दाएँ क्लिक करें > तत्व का निरीक्षण

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

आपको इसके आगे एक फलक में अपने HTML तत्व को हाइलाइट करते हुए भी देखना चाहिए। इसका उपयोग उस तत्व के वर्ग या आईडी का पता लगाने के लिए किया जा सकता है जिसे आप बदल रहे हैं। हमारे मामले में, हम अपने पृष्ठ पर मुख्य H1 शीर्षक देख रहे हैं, और यह .listing-title नामक एक वर्ग से संबंधित है।

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

सम्बंधित: HTML और CSS का उपयोग करके एक उत्तरदायी नेविगेशन बार कैसे बनाएं

अपना नया सीएसएस जोड़ना

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

हालाँकि आप अपना CSS कोड जोड़ते हैं, आपको यह सुनिश्चित करना होगा कि यह सही है। टेक्स्ट-शैली सीएसएस नियमों का उपयोग करना बहुत कठिन नहीं है, लेकिन जब आप यह नहीं समझ सकते कि अपने टेक्स्ट रंग को कैसे बदला जाए तो यह निराशाजनक हो सकता है। हमारे उदाहरण के लिए, यह वह कोड है जिसे हमें अपनी वेबसाइट में जोड़ना होगा।

लिस्टिंग-शीर्षक {
रंग नीला;
}

क्या होगा यदि आपका टेक्स्ट रंग नहीं बदलता है?

एक बार जब आप अपनी सीएसएस फ़ाइल को संपादित कर लेते हैं, तो जैसे ही आप अपने पेज को रीफ्रेश करते हैं, आपको अपने द्वारा किए गए परिवर्तन को देखने में सक्षम होना चाहिए। हालांकि यह हमेशा इतना आसान नहीं होता है। सीएसएस लोगों की अपेक्षा से अधिक जटिल हो सकता है, और आपको इस स्तर पर और अधिक करने की आवश्यकता हो सकती है।

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

लिस्टिंग-शीर्षक {
रंग: नीला! महत्वपूर्ण;
}

अन्य पाठ शैली सीएसएस मज़ा

जब आप अपनी वेबसाइट पर टेक्स्ट और अन्य तत्वों के साथ काम कर रहे होते हैं, तो CSS एक अविश्वसनीय रूप से शक्तिशाली टूल है, जो आपको कई अलग-अलग विकल्पों तक पहुंच प्रदान करता है। यह केवल CSS टेक्स्ट कलर के साथ ही नहीं रुकता है, और जब आप CSS का थोड़ा सा सीखना चुनते हैं तो आप अपने टेक्स्ट के साथ लोड कर सकते हैं। आप नीचे कुछ और बुनियादी सीएसएस पाठ शैली नियम पा सकते हैं:

• फ़ॉन्ट आकार: इससे आपकी वेबसाइट पर टेक्स्ट का आकार बदल जाता है, उदा., font-size: 12px;
• फ़ॉन्ट वजन: वजन एक फ़ॉन्ट की मोटाई को संदर्भित करता है, जिसमें बोल्ड उच्च वजन और पतला टेक्स्ट कम होता है, उदाहरण के लिए, फ़ॉन्ट-वेट: 400;
• पाठ संरेखित: यह उस टेक्स्ट के संरेखण को बदल देता है जिसके साथ आप काम कर रहे हैं, जैसे, टेक्स्ट-एलाइन: राइट;
• पाठ की छाया: यह आपको कई विशेषताओं के साथ अपने टेक्स्ट में एक छाया जोड़ने की अनुमति देता है, उदाहरण के लिए, टेक्स्ट-शैडो: 2px 2px 3px काला;
• पाठ बदलना: यह उस टेक्स्ट के केस को बदल देता है जिसके साथ आप काम कर रहे हैं, जैसे, टेक्स्ट-ट्रांसफॉर्म: अपरकेस;
• text-decoration: यह आपको टेक्स्ट में अंडरलाइन, डैश और अन्य डेकोरेशन जोड़ने की अनुमति देता है, जैसे, टेक्स्ट-डेकोरेशन: अंडरलाइन;

यह केवल सीएसएस में टेक्स्ट शैलियों के साथ आप क्या कर सकते हैं इसकी सतह को खरोंच कर रहा है। वेब पर बहुत सारी गाइड हैं जो इस प्रक्रिया में आपकी मदद कर सकती हैं, और जब आप शुरुआत करते हैं तो कुछ शोध करना हमेशा एक अच्छा विचार होता है।

सम्बंधित: CSS फॉन्ट-पारिवारिक संपत्ति के साथ अपनी वेबसाइट का टेक्स्ट कैसे बदलें

CSS टेक्स्ट कलर से अधिक जानें

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

१० सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

सीएसएस के साथ मदद चाहिए? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों को आजमाएं, फिर उन्हें अपने वेब पेजों पर लागू करें।

आगे पढ़िए

लेखक के बारे में