Including CSS in HTML (Inline, Internal, External) In Hindi
सीएसएस वेब पेज एलिमेंट डिज़ाइन स्क्रिप्ट को एचटीएमएल वेब पेज में आप तीन तरह से जोड़ या डिस्प्ले कर सकते है, जिसमे मुख्य रूप से इनलाइन सीएसएस जोड़ने का तरीका, इंटरनल सीएसएस तरीका और एक्सटर्नल सीएसएस तरीका शामिल है।
So, let’s add or display CSS in an HTML web page in different ways.
Adding inline CSS to an HTML web page.
किसी एचटीएमएल वेब पेज में आप इनलाइन सीएसएस ऐट्रिब्यूट्स इफ़ेक्ट स्टाइल को जोड़ने के लिए आप उस एचटीएमएल टैग एलिमेंट के अंदर ही सीएसएस स्टाइल स्क्रिप्ट कोड को लिखते है। लेकिन याद रखे, इनलाइन सीएसएस सिर्फ पर्टिकुलर एचटीएमएल टैग एलिमेंट कोड तक ही सिमित और कार्य करती है, आप एचटीएमएल वेब पेज में इनलाइन सीएसएस को किसी पर्टिकुलर टैग एलिमेंट को स्टाइल करने के लिए टारगेट कर सकते है।
Inline CSS attributes example in HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Inline Css Script Code</title>
<body>
<h1 style=”font-family:bookman old style; color: teal; font-size: 3rem;” >This Is The Correct Example Of Inline Css</h1>
<p style=”color: orange; font-size: 2em;”>This Is Another Example Of Inline Css Paragraph Text </p>
</body>
</html>
Advantages of Inline CSS.
- छोटे वेब पेज टैग एलिमेंट मॉडिफिकेशन के लिए क्विकली और आसानी से वेबसाइट के किसी पर्टिकुलर हिस्से में इनलाइन सीएसएस से संशोधन हो सकता है।
- इनलाइन सीएसएस से आपको मल्टीप्ल एक्सटर्नल और इंटरनल सीएसएस कोड लिखने को जरूरत नहीं होती है।
- इनलाइन सीएसएस को कही भी कभी भी वेब पेज के एलिमेंट में अप्लाई, मॉडिफाई, और अपग्रेड किया जा सकता है।
Disadvantages of Inline CSS.
- कई एचटीएमएल वेब पेज टैग एलिमेंट के लिए मल्टीप्ल कोड और ऐट्रिब्यूट्स को कोड करना पड़ता है।
- कई एचटीएमएल टैग में इनलाइन सीएसएस को अप्लाई करना वेब पेज कम्प्लीकेशन को बढ़ावा देता है.
- एक से अधिक इनलाइन सीएसएस स्क्रिप्ट कोड मौजूदा एचटीएमएल वेब पेज स्ट्रक्चर लेआउट और टैग एलिमेंट कोड को अनऑर्डर्ड और काम्प्लेक्स कर देता है।
Adding internal CSS to an HTML web page.
यदि आप अपने मौजूदा एचटीएमएल वेब पेज के अंदर ही सीएसएस कोड लिखना चाहते है, तो आप इंटरनल सीएसएस को मौजूदा एचटीएमएल वेब पेज के अंदर <head> टैग सेक्शन के अंदर सीएसएस <style> टैग या एलिमेंट के अंदर लिख सकते है। इंटरनल सीएसएस अप्लाई मेथड एक ही समय में समस्त एचटीएमएल वेब पेज टैग एलिमेंट पर सीएसएस स्टाइलशीट ऐट्रिब्यूट्स को अप्लाई कर देती है. जहा आप सिंगल इनलाइन सीएसएस कोड लिख कर सिंगल वेबपेज टार्गेटेड टैग एलिमेंट को क्विक इमीडियेट स्टाइल फॉर्मेट और डेकोरेट कर सकते है।
internal CSS attributes example in HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Internal CSS Script Code</title>
<style>
body {
font-size:1.5em;
background-color: aqua;
}
h1 {
font-family:monotype corsiva;
color: red;
}
p {
color: brown;
font-size: 30px;
}
</style>
</head>
<body>
<h1>This Is A Internal Css Heading Script Code</h1>
<p>This Is A Paragraph Internal Css Script Code</p>
</body>
</html>
Advantages of internal CSS.
- किसी पर्टिकुलर सिंगल एचटीएमएल वेब पेज टैग एलिमेंट कंटेंट को एक साथ स्टाइल और ऐट्रिब्यूट्स को अप्लाई करना एक साथ करता है।
- एचटीएमएल वेब पेज में इनलाइन सीएसएस की तुलना में इंटरनल सीएसएस को स्टाइल और ऐट्रिब्यूट्स को अप्लाई कर सरल और सुगम बनाता है।
Disadvantages of internal CSS.
- कई एचटीएमएल वेबपेजों पर सीएसएस स्टाइल का दोबारा उपयोग करना अधिक कठिन हो जाता है।
- यदि सिंगल वेब पेज में एक ही सीएसएस ऐट्रिब्यूट्स को मल्टीप्ल एचटीएमएल टैग ऐट्रिब्यूट्स में अप्लाई किया गया है, तो यह क्लाइंट वेब ब्राउज़र में वेब पेज लोडिंग टाइम को बढ़ा देता है, याद रहे, अधिक सीएसएस का उपयोग आपके वेब प्रदर्शन को धीमा कर देता है।
Adding external CSS to an HTML web page.
एक्सटर्नल सीएसएस स्क्रिप्ट कोड को एचटीएमएल वेब पेज में <head> टैग सेक्शन में <link> टैग का उपयोग करके ऐड या लिंक किया जाता है, यहाँ सभी जरूरी सीएसएस कोड स्क्रिप्ट को के एक्सटर्नल फाइल में सभी वेब पेजेज के लिए लिखा जाता है। और बाद में उसे सिंगल टाइम सीएसएस एचटीएमएल वेब पेज इफ़ेक्ट ऐट्रिब्यूट्स के लिए वेबपेज वेबसाइट में अप्लाई किया जाता है, आप किसी भी एचटीएमएल एडिटर का उपयोग कर एक्सटर्नल सीएसएस स्क्रिप्ट कोड को निर्माण कर सकते है, और उसे अपने वेब पेज में डायरेक्ट लिंक कर सकते है, एक्सटर्नल सीएसएस एक ही समय में सम्पूर्ण वेबसाइट को स्टाइल और ऐट्रिब्यूट्स अप्लाई कर सकती है।
External CSS attributes example in HTML.
develop a External link CSS file (filestyle.css):
body {
background-color: aqua;
}
h1 {
font-family: arial;
color: red;
}
p {
font-size: 2em;
}
Link an external CSS file in an HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>External CSS Script Code</title>
<link rel=”stylesheet” href=”filestyle.css”>
</head>
<body>
<h1>You Can See All Css Heading1 Attributes Apply In filestyle.css file</h1>
<p>It Preview All The Manual External Css file name filestyle.css effect in paragrap tag.</p>
</body>
</html>
Advantages of external CSS.
- एक्सटर्नल सीएसएस एचटीएमएल वेब पेज में इनलाइन, इंटरनल सीएसएस कोड से सेपरेट क्रिएट की जाती है, जिससे एचटीएमएल वेब पेज डेवलपमेंट कम्प्लीकेशन घट जाती है, और ये एक क्लीन वेब पेज डिज़ाइन डेवेलपमें में सहायक है।
- एक्सटर्नल सीएसएस को मल्टीप्ल एचटीएमएल वेब पेजों में हेड सेक्शन में लिंक कर कई बार उपयोग किया जा सकता है।
- एक्सटर्नल सीएसएस स्क्रिप्ट कोड ऐट्रिब्यूट्स को मेन्टेन, अपडेट, और कस्टमाइज करना अधिक आसान और क्विक प्रोसेस है।
Disadvantages of external CSS.
- एक्सटर्नल सीएसएस को एचटीएमएल वेब पेज में अलग से लिंक किया जाता है, जिससे ये एक अतिरिक्त HTTP वेब रिक्वेस्ट की जरूरत पड़ती है, जो की वेब पेज लोडिंग समय को बढ़ा देती है, और कई बार वेबसाइट वेब पेज में सभी एक्सटर्नल सीएसएस स्क्रिप्ट कोड ऐट्रिब्यूट्स को डिस्प्ले प्रीव्यू होने में अधिक समय लगता है।
Brief overview of inline, internal, and external CSS in an html web page.
- inline css scripts – क्विकली और फास्टली वेब पेज पर्टिकुलर पोरशन में अप्लाई कर सकते है, इसे एक बार में मल्टीप्ल एचटीएमएल टैग एलिमेंट में उपयोग नहीं किया जा सकता है।
- Internal CSS scripts – सिंगल एचटीएमएल वेब पेज के लिए इंटरनल सीएसएस को अप्लाई किया जा सकता है, कई बार इंटरनल सीएसएस वेब पेज को कम्प्लीकेट कर देती है।
- External CSS – सम्पूर्ण एचटीएमएल वेब पेज में एक साथ अप्लाई और मॉडिफिकेशन के लिए बेस्ट है, एक्सटर्नल सीएसएस को एक समय में लाइव अपडेट मॉडिफाई और कस्टमाइज किया जा सकता है।
