कैसे HTML में टेक्स्ट कलर बदलें (Change Text Color in HTML)

सहयोगी लेखक द्वारा विकीहाउ स्टाफ

हालाँकि आप HTML में <font> टैग का इस्तेमाल करके, आपके टेक्स्ट (Text) का कलर बदल सकते हैं, लेकिन ये विधि HTML5 पर अब इस्तेमाल नहीं की जा सकती है। अब आपके पेज पर मौजूद अलग-अलग तरह के एलिमेंट (elements) पर जिन भी कलर को दर्शाना है, उसके लिए आप बेसिक CSS का इस्तेमाल करेंगे। CSS का इस्तेमाल करके आप इस बात की पुष्टि कर लेंगे कि आपका ये वेबपेज, हर एक संभावित ब्राउज़र के साथ कम्पेटिबल (compatible) होगा।

विधि 1

विधि 1 का 2:

CSS इस्तेमाल करना (Using CSS)

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/157292-1.jpg\/v4-460px-157292-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/157292-1.jpg\/v4-728px-157292-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
आपकी HTML फाइल खोलें: CSS इस्तेमाल करना, आपके टेक्स्ट का कलर बदलने का सबसे अच्छा तरीका है। पुराने HTML <font> एट्रीब्यूट (attribute) अब HTML5 पर सपोर्ट नहीं होते। आपके एलिमेंट्स के लिए स्टाइल परिभाषित करने के लिए CSS इस्तेमाल करना उचित है।
- ये विधि एक्सटर्नल स्टाइल शीट्स (external stylesheets (CSS फाइल्स से अलग)) के साथ भी काम करती है: नीचे दिया गये उदाहरण, इंटरनल स्टाइलशीट (internal stylesheet) का इस्तेमाल करते हुए HTML फाइल तैयार करने के लिए हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/157292-2.jpg\/v4-460px-157292-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/157292-2.jpg\/v4-728px-157292-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

अब यदि आप इंटरनल स्टाइलशीट इस्तेमाल कर रहे हैं, तो आप आपकी स्टाइल को इन टैग्स के बीच में परिभाषित करेंगे।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/157292-3.jpg\/v4-460px-157292-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/157292-3.jpg\/v4-728px-157292-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
इंटरनल स्टाइल शीट तैयार करने के लिए <style> लिखें: जब भी <style> टैग, <head> टैग के अंदर होता है, CSS, <style> टैग के अंदर उस पेज पर लागू होने वाले सारे एलिमेंट को स्टाइल करता है। अब जब आप ऐसा कर लें, तो आपकी HTML फाइल की शुरुआत कुछ इस तरह की नजर आनी चाहिए: ^{[१]
X
रिसर्च सोर्स}
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7a\/157292-4.jpg\/v4-460px-157292-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7a\/157292-4.jpg\/v4-728px-157292-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
उस एलिमेंट को लिखें, आप जिसका कलर बदलना चाहते हैं: आप आपके पेज पर मौजूद अलग-अलग तरह के एलिमेंट के प्रदर्शन को परिभाषित करने के लिए <style> भाग का इस्तेमाल करेंगे। उदाहरण के लिए, आपके पेज के सारे बॉडी टेक्स्ट की स्टाइल बदलने के लिए ऐसा लिखें:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/157292-5.jpg\/v4-460px-157292-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/157292-5.jpg\/v4-728px-157292-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
एट्रीब्यूट लिखें: अब color: एट्रीब्यूट आपके पेज को ये बताएगा कि उस एलिमेंट में किस रंग को इस्तेमाल करना है। इस उदाहरण में, ये आपके पूरे के पूरे बॉडी टेक्स्ट को बदल देगा जो कि आपके पेज पर मौजूद सारे टेक्स्ट के लिए डिफ़ॉल्ट एलिमेंट है:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 color 
 : 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/157292-6.jpg\/v4-460px-157292-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/157292-6.jpg\/v4-728px-157292-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
आप टेक्स्ट के लिए जो भी कलर इस्तेमाल करना चाहते हैं, उसे लिखें: यहाँ पर आप तीन तरीके से कलर एंटर कर सकते हैं: एक तो कलर का नाम, दूसरा कलर की हेक्स वैल्यू (hex value) और तीसरा आरजीबी (RGB) वैल्यू। जैसे कि, नीले रंग के लिए आप blue , rgb(0, 0, 255) या #0000FF लिख सकते हैं।
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 color 
 : 
 red 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/157292-7.jpg\/v4-460px-157292-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/157292-7.jpg\/v4-728px-157292-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
अलग-अलग एलिमेंट के कलर बदलने के लिए, एक अन्य सिलेक्टर (Selector) एड करें: आप पेज के अलग-अलग भाग पर टेक्स्ट का कलर बदलने के लिए, अलग-अलग सिलेक्टर का इस्तेमाल कर सकते हैं:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 body 
 { 
 color 
 : 
 red 
 ; 
 } 
 h1 
 { 
 color 
 : 
 #00FF00 
 ; 
 } 
 p 
 { 
 color 
 : 
 rgb 
 ( 
 0 
 , 
 0 
 , 
 255 
 ) 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
ये हैडर हरे रंग का होगा। </ 
 h1 
 > 
 < 
 p 
 > 
ये पैराग्राफ नीले रंग का होगा। </ 
 p 
 > 
इस बॉडी का टेक्स्ट लाल होगा। </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/157292-8.jpg\/v4-460px-157292-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/157292-8.jpg\/v4-728px-157292-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
किसी एलिमेंट को बदलने के बजाय CSS क्लास को परिभाषित करें: आप चाहें तो पहले एक क्लास परिभाषित कर सकते हैं, फिर आप पेज पर मौजूद जिन भी एलिमेंट पर चाहें, इस क्लास स्टाइल को चुटकी में लागू कर सकते हैं। जैसे कि, दी गई फाइल में, जो ".redtext" क्लास है, वो अब किसी भी एलिमेंट पर लाल रंग के टेक्स्ट को लागू कर सकती है:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 redtext 
 { 
 color 
 : 
 red 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 class 
 = 
 "redtext" 
 > 
ये शीर्षक लाल रंग का होगा। </ 
 h1 
 > 
 < 
 p 
 > 
ये पैराग्राफ सामान्य रहेगा। </ 
 p 
 > 
 < 
 p 
 class 
 = 
 "redtext" 
 > 
ये पैराग्राफ लाल रंग का होगा। </ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```

विधि 2

विधि 2 का 2:

इनलाइन स्टाइल एट्रीब्यूट (Inline Style Attributes) इस्तेमाल करना

आर्टिकल डाउनलोड करें

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/157292-9.jpg\/v4-460px-157292-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/157292-9.jpg\/v4-728px-157292-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

आप इनलाइन स्टाइल एट्रीब्यूट का इस्तेमाल, आपके पेज पर मौजूद किसी एक एलिमेंट के कलर को बदलने के लिए कर सकते हैं। हालाँकि, ये स्टाइल में कुछ एक या दो बदलाव करने तक ही उपयोगी साबित होते हैं, इन्हें इससे ज्यादा विस्तृत रूप से इस्तेमाल करने की सलाह नहीं दी जाती है। विस्तृत रूप से स्टाइल बदलने के लिए, इससे पहले वाली विधि का इस्तेमाल कीजिये। ^{[२]
X
रिसर्च सोर्स}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/157292-10.jpg\/v4-460px-157292-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/157292-10.jpg\/v4-728px-157292-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
आपकी फाइल से उस एलिमेंट को पाइए, जिसे आप बदलना चाहते हैं: आप चाहें तो आपके किसी भी एलिमेंट के टेक्स्ट कलर को बदलने के लिए इनलाइन एट्रीब्यूट का इस्तेमाल कर सकते हैं। उदाहरण के लिए, यदि आप किसी विशेष हैडर (header) के टेक्स्ट कलर को बदलना चाहते हैं, तो उसे आपकी फाइल में खोज लीजिये:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
यही वो हैडर है, आप जिसमें बदलाव करना चाहते हैं। </ 
 h1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5c\/157292-11.jpg\/v4-460px-157292-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5c\/157292-11.jpg\/v4-728px-157292-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
एलिमेंट में स्टाइल एट्रीब्यूट एड करें: आप जिस एलिमेंट में बदलाव करना चाहते हैं, उस के खुलने वाले टैग के अंदर style="" लिखें:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 style 
 = 
 "" 
 > 
यही वो हैडर है, आप जिसमें बदलाव करना चाहते हैं। </ 
 h1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ea\/157292-12.jpg\/v4-460px-157292-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ea\/157292-12.jpg\/v4-728px-157292-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
"" के अंदर color: एट्रीब्यूट लिखें। उदाहरण के लिए:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 style 
 = 
 "color:" 
 > 
यही वो हैडर है, आप जिसमें बदलाव करना चाहते हैं। </ 
 h1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/157292-13.jpg\/v4-460px-157292-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/157292-13.jpg\/v4-728px-157292-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
आप जिस कलर को टेक्स्ट पर लागू करना चाहते हैं, उसे लिखें: कलर को लिखने के तीन तरीके मौजूद हैं। एक तो कलर का नाम लिख सकते हैं, चाहें तो कलर की हेक्स वैल्यू (hex value) एंटर कर सकते हैं या फिर कलर की आरजीबी (RGB) वैल्यू एंट कर सकते हैं। उदाहरण के लिए, पीला कलर बदलने के लिए, आप yellow; , rgb(255,255,0); या #FFFF00; लिख सकते हैं:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 style 
 = 
 "color:#FFFF00;" 
 > 
ये हैडर आप पीले कलर का है। </ 
 h1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```