HTML <style> एलिमेंट का उपयोग करना सीखें।
<style> एलिमेंट का उपयोग आपके HTML दस्तावेज़ में सीधे स्टाइल एम्बेड करने के लिए किया जाता है:
<style> h1 { color: red; } p { color: green; } </style><style> एलिमेंट आपके HTML दस्तावेज़ के <head> एलिमेंट के अंदर रहता है:
<!DOCTYPE html> <html> <head> <style> h1 { color: red; } p { color: green; } </style> </head> <body> <h1>यह एक लाल शीर्षक है</h1> <p>यह एक हरा पैराग्राफ है</p> </body> </html>आप एक्सटर्नल स्टाइलशीट भी इम्पोर्ट कर सकते हैं, जो <link> एलिमेंट के साथ किया जाता है। यह आम तौर पर पसंदीदा तरीका है, कम से कम बड़ी वेबसाइटों पर।
जानने योग्य बातें:
यदि आप एक ही दस्तावेज़ में स्टाइल करने के लिए <style> और <link> दोनों एलिमेंट्स का उपयोग करते हैं, तो गलती से स्टाइल ओवरराइड करना आसान होता है।
उदाहरण के लिए, निम्नलिखित उदाहरण देखें, जो दोनों स्टाइलिंग दृष्टिकोणों का उपयोग करता है:
<!DOCTYPE html> <html> <head> <!-- एम्बेडेड (आंतरिक) स्टाइल्स --> <style> h1 { color: red; } p { color: green; } </style> <!-- एक्सटर्नल स्टाइल शीट इम्पोर्ट करें --> <link href="/styles/main.css" rel="stylesheet" /> </head> <body> <h1>यह एक लाल शीर्षक है</h1> <p>यह एक हरा पैराग्राफ है</p> </body> </html>इसलिए उदाहरण के लिए यदि एक्सटर्नल स्टाइलशीट h1 और p सेलेक्टर पर एक कलर प्रॉपर्टी वैल्यू परिभाषित करती है, जैसे इसे blue कलर वैल्यू देकर, तो red और green ओवरराइट हो जाएंगे, क्योंकि उपरोक्त मार्कअप उदाहरण में <link> एलिमेंट <style> एलिमेंट के बाद आता है।
इसे मिक्स अप करना इतना आसान है, इसलिए मैं सलाह देता हूं कि आप आम तौर पर स्टाइल इम्पोर्ट करने के लिए <link> एलिमेंट का उपयोग करें — और केवल <style> एलिमेंट का उपयोग अत्यधिक विशिष्ट उपयोग के मामलों के लिए करें।
