HTML <link> एलिमेंट का उपयोग करना सीखें।
HTML <link> एलिमेंट का उपयोग मुख्य रूप से एक्सटर्नल CSS फ़ाइलों को इम्पोर्ट करने के लिए किया जाता है जो आपकी वेबसाइट में स्टाइल जोड़ती हैं।
<link> एलिमेंट <head> एलिमेंट के अंदर रहता है, और कई प्रकार के एट्रिब्यूट्स स्वीकार करता है:
<!DOCTYPE html> <html> <head> <title>डॉक्यूमेंट शीर्षक</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>सबसे आम <link> एलिमेंट एट्रिब्यूट्स ऊपर दिखाए गए दो हैं, href और rel:
hrefआपकी लिंक्ड फ़ाइल का स्थान निर्दिष्ट करता है, इस मामले मेंmain.cssनामक एक स्टाइल शीटrelरिलेशनशिप के लिए खड़ा है, और यह उस दस्तावेज़ के बीच संबंध निर्दिष्ट करता है जिसमें यह बैठता है और लिंक्ड CSS फ़ाइल।
अपनी वेबसाइट को स्टाइल करने का एक वैकल्पिक तरीका <style> एलिमेंट का उपयोग करना है, जो आपको CSS स्टाइल्स को सीधे अपने दस्तावेज़ के अंदर एम्बेड करने की अनुमति देता है (इसे इंटरनल CSS भी कहा जाता है)।
हालांकि, वेबसाइट्स को स्टाइल करने का आधुनिक तरीका <link> का उपयोग करके स्टाइल्स इम्पोर्ट करना है, या तो अपने स्वयं के प्रोजेक्ट फोल्डर your-project/styles/main.css से, या किसी एक्सटर्नल प्रोवाइडर (दूसरे डोमेन पर) से।
जानने योग्य बातें:
यदि आप एक ही दस्तावेज़ में स्टाइल करने के लिए <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> एलिमेंट का उपयोग अत्यधिक विशिष्ट उपयोग के मामलों के लिए करें।
