इस अध्याय में, आप CSS को अपने HTML दस्तावेज़ों में लागू करने के विभिन्न तरीकों के बारे में जानेंगे। हम इनलाइन CSS, इंटरनल CSS, और एक्सटर्नल CSS के बारे में विस्तार से चर्चा करेंगे। प्रत्येक विधि के अपने फायदे और सीमाएँ होती हैं, और इन्हें समझकर आप अपने वेब प्रोजेक्ट्स के लिए सबसे उपयुक्त तरीका चुन सकेंगे। इस अध्याय के अंत तक, आप इन तीनों तरीकों का प्रभावी ढंग से उपयोग कर सकेंगे और अपने वेब पेजों को बेहतर तरीके से स्टाइल कर सकेंगे। चलिए, पहले सेक्शन “इनलाइन CSS (Inline CSS)” से शुरुआत करते हैं।
इनलाइन CSS (Inline CSS)
इनलाइन CSS का परिचय (Introduction to Inline CSS)
इनलाइन CSS का उपयोग सीधे HTML एलिमेंट्स के भीतर स्टाइल लागू करने के लिए किया जाता है। यह स्टाइल को HTML टैग के “style” एट्रिब्यूट में निर्दिष्ट करता है। इनलाइन CSS का उपयोग तब किया जाता है जब आपको केवल कुछ एलिमेंट्स पर विशिष्ट स्टाइल लागू करनी हो, जो कि अन्य विधियों की तुलना में अधिक सरल और त्वरित होता है।
इनलाइन CSS का उपयोग (Using Inline CSS)
इनलाइन CSS का उपयोग बहुत आसान है। आपको केवल HTML टैग में “style” एट्रिब्यूट जोड़ना होता है और उसमें CSS गुण और मान निर्दिष्ट करने होते हैं।
उदाहरण:
<p style="color: blue; font-size: 20px;">यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया पैराग्राफ है।</p>
इनलाइन CSS के लाभ और सीमाएँ (Advantages and Limitations of Inline CSS)
लाभ (Advantages):
- त्वरित और सरल: इनलाइन CSS का उपयोग करना बहुत आसान और त्वरित है, खासकर जब आपको केवल कुछ ही एलिमेंट्स को स्टाइल करना हो।
- स्थानीयकृत स्टाइल: यह केवल उस विशेष एलिमेंट पर लागू होता है, जिससे अन्य एलिमेंट्स पर इसका प्रभाव नहीं पड़ता।
- कोडिंग में आसानी: छोटे और सरल वेब पेजों के लिए, यह विधि बहुत उपयोगी हो सकती है।
सीमाएँ (Limitations):
- कोड का पुन: उपयोग नहीं: इनलाइन CSS कोड को पुन: उपयोग नहीं किया जा सकता, जिससे कोड लंबा और जटिल हो सकता है।
- अनुपालन और देखभाल में कठिनाई: बड़े वेब पेजों के लिए, इनलाइन CSS को प्रबंधित और बनाए रखना मुश्किल हो सकता है।
- प्रदर्शन के मुद्दे: बड़े पैमाने पर इनलाइन CSS का उपयोग वेब पेज के लोडिंग समय को प्रभावित कर सकता है।
उदाहरण (Examples)
नीचे दिए गए कुछ उदाहरणों के माध्यम से हम देखेंगे कि इनलाइन CSS का उपयोग कैसे किया जाता है।
उदाहरण 1: टेक्स्ट का रंग और फॉन्ट साइज बदलना
<p style="color: red; font-size: 18px;">यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया पैराग्राफ है।</p>
उदाहरण 2: बैकग्राउंड रंग और बॉर्डर जोड़ना
<div style="background-color: yellow; border: 2px solid black; padding: 10px;">
यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया डिव है।
</div>
उदाहरण 3: लिंक का रंग बदलना और अंडरलाइन हटाना
<a href="#" style="color: green; text-decoration: none;">यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया लिंक है।</a>
HTML कोड:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>इनलाइन CSS का उदाहरण</title> </head> <body> <p style="color: red; font-size: 18px;">यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया पैराग्राफ है।</p> <div style="background-color: yellow; border: 2px solid black; padding: 10px;"> यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया डिव है। </div> <a href="#" style="color: green; text-decoration: none;">यह एक इनलाइन CSS का उपयोग करके स्टाइल किया गया लिंक है।</a> </body> </html>
See the Pen Untitled by arun geek (@arun-geek) on CodePen.
इंटरनल CSS (Internal CSS)
इंटरनल CSS का परिचय (Introduction to Internal CSS)
इंटरनल CSS का उपयोग HTML दस्तावेज़ के <head> सेक्शन में स्टाइल नियम जोड़ने के लिए किया जाता है। यह विधि तब उपयोगी होती है जब आपको एक ही HTML पेज पर कई एलिमेंट्स को स्टाइल करना हो, लेकिन आप एक्सटर्नल CSS फाइल का उपयोग नहीं करना चाहते। इंटरनल CSS का उपयोग करते हुए, आप एक ही स्थान पर सभी स्टाइल नियम लिख सकते हैं, जिससे उन्हें प्रबंधित करना आसान हो जाता है।
इंटरनल CSS का उपयोग (Using Internal CSS)
इंटरनल CSS का उपयोग करने के लिए, आपको अपने HTML दस्तावेज़ के <head> सेक्शन में <style> टैग का उपयोग करना होगा। <style> टैग के भीतर, आप अपने CSS नियम लिख सकते हैं।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>इंटरनल CSS का उदाहरण</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है</h1>
<p>यह एक पैराग्राफ है जो इंटरनल CSS का उपयोग कर रहा है।</p>
</body>
</html>
इंटरनल CSS के लाभ और सीमाएँ (Advantages and Limitations of Internal CSS)
लाभ (Advantages):
- स्थानीयकृत स्टाइलिंग: इंटरनल CSS का उपयोग करके आप एक ही HTML पेज पर सभी स्टाइल नियम लिख सकते हैं, जिससे कोड को प्रबंधित करना आसान हो जाता है।
- बाहरी फाइल की आवश्यकता नहीं: आपको एक अलग CSS फाइल बनाने और लिंक करने की आवश्यकता नहीं होती, जिससे समय और प्रयास की बचत होती है।
- स्थापित करना आसान: छोटे और मझोले वेब पेजों के लिए इंटरनल CSS आदर्श होता है।
सीमाएँ (Limitations):
- पुन: उपयोग नहीं: इंटरनल CSS कोड को अन्य HTML पेजों पर पुन: उपयोग नहीं किया जा सकता।
- प्रदर्शन के मुद्दे: बड़े वेब पेजों के लिए, इंटरनल CSS कोड दस्तावेज़ के लोड समय को प्रभावित कर सकता है।
- अन्य पेजों पर लागू नहीं: इंटरनल CSS केवल उस पेज पर लागू होता है जिसमें इसे लिखा गया है, अन्य पेजों पर नहीं।
उदाहरण (Examples)
नीचे दिए गए कुछ उदाहरणों के माध्यम से हम देखेंगे कि इंटरनल CSS का उपयोग कैसे किया जाता है।
उदाहरण 1: बॉडी बैकग्राउंड और टेक्स्ट स्टाइलिंग
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>इंटरनल CSS का उदाहरण</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है</h1>
<p>यह एक पैराग्राफ है जो इंटरनल CSS का उपयोग कर रहा है।</p>
</body>
</html>
See the Pen Untitled by arun geek (@arun-geek) on CodePen.
एक्सटर्नल CSS (External CSS)
एक्सटर्नल CSS का परिचय (Introduction to External CSS)
एक्सटर्नल CSS का उपयोग एक अलग CSS फाइल में स्टाइल नियम लिखने के लिए किया जाता है, जिसे HTML दस्तावेज़ के <head> सेक्शन में <link> टैग के माध्यम से लिंक किया जाता है। यह विधि तब उपयोगी होती है जब आप एक से अधिक HTML पेजों पर समान स्टाइल लागू करना चाहते हैं। एक्सटर्नल CSS कोड को अलग फाइल में रखकर, आप अपने HTML कोड को साफ और संरचित रख सकते हैं।
एक्सटर्नल CSS का उपयोग (Using External CSS)
एक्सटर्नल CSS का उपयोग करने के लिए, आपको एक अलग CSS फाइल बनानी होती है जिसमें सभी स्टाइल नियम लिखे जाते हैं। फिर उस CSS फाइल को HTML दस्तावेज़ के <head> सेक्शन में <link> टैग के माध्यम से लिंक किया जाता है।
CSS फाइल (styles.css):
body {
background-color: lightgrey;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
HTML फाइल (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>एक्सटर्नल CSS का उदाहरण</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>यह एक हेडिंग है</h1> <p>यह एक पैराग्राफ है जो एक्सटर्नल CSS का उपयोग कर रहा है।</p> </body> </html>
एक्सटर्नल CSS के लाभ और सीमाएँ (Advantages and Limitations of External CSS)
लाभ (Advantages):
- कोड पुन: उपयोग (Code Reusability): एक्सटर्नल CSS फाइल को कई HTML पेजों में लिंक किया जा सकता है, जिससे कोड को पुन: उपयोग और प्रबंधित करना आसान हो जाता है।
- संगठित कोड (Organized Code): CSS कोड को अलग फाइल में रखने से HTML कोड साफ और संरचित रहता है।
- प्रदर्शन में सुधार (Improved Performance): एक बार ब्राउज़र द्वारा CSS फाइल को लोड करने के बाद, वह सभी पेजों के लिए कैश हो जाता है, जिससे पेज लोडिंग समय कम हो जाता है।
सीमाएँ (Limitations):
- प्रारंभिक लोड समय (Initial Load Time): एक्सटर्नल CSS फाइल को लोड करने में थोड़ा अधिक समय लग सकता है, जिससे पेज का प्रारंभिक लोड समय बढ़ सकता है।
- सीमित स्कोप (Limited Scope): एक्सटर्नल CSS कोड को केवल उन पेजों पर लागू किया जा सकता है जो उस CSS फाइल को लिंक करते हैं।
- इंटरनेट कनेक्शन पर निर्भरता (Dependency on Internet Connection): अगर CSS फाइल किसी बाहरी सर्वर पर हो और इंटरनेट कनेक्शन धीमा हो, तो पेज का लोड समय प्रभावित हो सकता है।
उदाहरण (Examples)
नीचे दिए गए कुछ उदाहरणों के माध्यम से हम देखेंगे कि एक्सटर्नल CSS का उपयोग कैसे किया जाता है।
उदाहरण 1: बॉडी बैकग्राउंड और टेक्स्ट स्टाइलिंग CSS फाइल (styles.css):
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}HTML फाइल (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>एक्सटर्नल CSS का उदाहरण</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>यह एक हेडिंग है</h1> <p>यह एक पैराग्राफ है जो एक्सटर्नल CSS का उपयोग कर रहा है।</p> </body> </html>
