सीएसएस कैसे जोड़ें
जब कोई ब्राउज़र किसी स्टाइल शीट को पढ़ता है, तो वह स्टाइल शीट में दी गई जानकारी के अनुसार HTML दस्तावेज़ को प्रारूपित करेगा।
CSS डालने के तीन तरीके
स्टाइल शीट डालने के तीन तरीके हैं:
- बाहरी सीएसएस
- आंतरिक सीएसएस
- इनलाइन सीएसएस
बाहरी सीएसएस
बाहरी स्टाइल शीट के साथ, आप केवल एक फ़ाइल को बदलकर पूरी वेबसाइट का रूप बदल सकते हैं!
प्रत्येक HTML पृष्ठ में <link> तत्व के अंदर, शीर्ष अनुभाग के अंदर बाहरी स्टाइल शीट फ़ाइल का संदर्भ शामिल होना चाहिए।
उदाहरण
बाहरी शैलियों को HTML पृष्ठ के <head> अनुभाग के अंदर <link> तत्व के भीतर परिभाषित किया गया है:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
एक बाहरी स्टाइल शीट किसी भी टेक्स्ट एडिटर में लिखी जा सकती है, और इसे .css एक्सटेंशन के साथ सहेजा जाना चाहिए।
बाहरी .css फ़ाइल में कोई HTML टैग नहीं होना चाहिए।
यहाँ "mystyle.css" फ़ाइल कैसी दिखती है:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
नोट: संपत्ति मूल्य और इकाई के बीच एक स्थान न जोड़ें:
गलत (स्थान): margin-left: 20 px;
सही (नोस्पेस):margin-left: 20px;
आंतरिक सीएसएस
एक आंतरिक शैली पत्रक का उपयोग किया जा सकता है यदि एक एकल HTML पृष्ठ की एक अनूठी शैली है।
आंतरिक शैली को <शैली> तत्व के अंदर, शीर्ष अनुभाग के अंदर परिभाषित किया गया है।
उदाहरण
आंतरिक शैलियों को HTML पृष्ठ के <head> अनुभाग के अंदर <शैली> तत्व के भीतर परिभाषित किया गया है:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
इनलाइन सीएसएस
एक तत्व के लिए एक अनूठी शैली लागू करने के लिए एक इनलाइन शैली का उपयोग किया जा सकता है।
इनलाइन शैलियों का उपयोग करने के लिए, प्रासंगिक तत्व में शैली विशेषता जोड़ें। शैली विशेषता में कोई भी CSS गुण हो सकता है।
उदाहरण
इनलाइन शैलियों को प्रासंगिक तत्व की "शैली" विशेषता के भीतर परिभाषित किया गया है:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
युक्ति: एक इनलाइन शैली स्टाइल शीट (प्रस्तुति के साथ सामग्री को मिलाकर) के कई फायदे खो देती है। इस विधि का प्रयोग संयम से करें।
एकाधिक शैली पत्रक
यदि अलग-अलग स्टाइल शीट में एक ही चयनकर्ता (तत्व) के लिए कुछ गुणों को परिभाषित किया गया है, तो अंतिम रीड स्टाइल शीट के मान का उपयोग किया जाएगा।
मान लें कि बाहरी स्टाइल शीट में <h1> तत्व के लिए निम्न शैली है:
h1
{
color: navy;
}फिर, मान लें कि एक आंतरिक स्टाइल शीट में <h1> तत्व के लिए निम्न शैली भी है:
h1
{
color: orange;
}उदाहरण
यदि बाहरी स्टाइल शीट के लिंक के बाद आंतरिक शैली को परिभाषित किया जाता है , तो <h1> तत्व "नारंगी" होंगे:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
उदाहरण
हालांकि, अगर बाहरी स्टाइल शीट के लिंक से पहले आंतरिक शैली को परिभाषित किया गया है, तो <h1> तत्व "नौसेना" होंगे:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
कैस्केडिंग ऑर्डर
एक HTML तत्व के लिए निर्दिष्ट एक से अधिक शैली होने पर किस शैली का उपयोग किया जाएगा?
एक पृष्ठ की सभी शैलियाँ निम्नलिखित नियमों के अनुसार एक नई "वर्चुअल" स्टाइल शीट में "कैस्केड" करेंगी, जहाँ नंबर एक की सर्वोच्च प्राथमिकता है:
- इनलाइन शैली (HTML तत्व के अंदर)
- बाहरी और आंतरिक स्टाइल शीट (हेड सेक्शन में)
- ब्राउज़र डिफ़ॉल्ट
इसलिए, एक इनलाइन शैली की सर्वोच्च प्राथमिकता होती है, और बाहरी और आंतरिक शैलियों और ब्राउज़र डिफ़ॉल्ट को ओवरराइड कर देगी।
कभी W3Schools Spaces के बारे में सुना है ? यहां आप अपनी खुद की वेबसाइट बना सकते हैं, या बाद में उपयोग के लिए कोड स्निपेट मुफ्त में सहेज सकते हैं।
मुफ़्त में शुरू करें* किसी क्रेडिट कार्ड की आवश्यकता नहीं