हिन्दी में वैबसाइट डिजाइनिंग सीखना चाहते हैं तो हमारी साइट code sikho hindi को Subscribe करें

Inline, Internal & External CSS Free web designing Course Tutorials #14

Inline, Internal & External CSS Free web designing Course Tutorials #14


Inline, Internal & External CSS

आप सभी का स्वागत है! जैसा कि पिछले ट्यूटोरियल में हमने देखा है कि CSS- इनलाइन, इंटरनल और एक्सटर्नल लिखने के तीन तरीके हैं। यहां, हम इन तीनों विधियों पर चर्चा करेंगे और CSS के कुछ वास्तविक कार्यान्वयन करेंगे। इस ट्यूटोरियल को शुरू करने के लिए, सबसे पहले, हम tut13.html के रूप में एक नई फाइल बनाएंगे और बॉयलरप्लेट को जोड़ेंगे। हमारी सुविधा के लिए, हम <title> टैग में सीएसएस ट्यूटोरियल के रूप में शीर्षक देंगे।

इनलाइन सीएसएस आपको एक समय में एक HTML तत्व के लिए एक अनूठी शैली लागू करने की अनुमति देता है। आप इनलाइन सीएसएस को एक विशिष्ट HTML तत्व में शैली विशेषता का उपयोग करके निर्दिष्ट कर सकते हैं जिसमें कोई सीएसएस गुण परिभाषित किया गया है। इसे एक उदाहरण से समझने का प्रयास करते हैं।

<body>
         <h1>This is CSS tutorial</h1>
          <p style= “color: red;”>This tutorial will teach you everything you need to know about CSS</p>
</body>

उपरोक्त कोड लिखकर, हम परिवर्तनों को देखेंगे-


आप सोच रहे होंगे कि वेबसाइट पर CSS जोड़ने का यह सबसे अच्छा तरीका है लेकिन मैं आपको बता दूं कि यह आपके HTML को स्टाइल करने का सबसे अच्छा तरीका नहीं है। यदि आप बहुत अधिक इनलाइन सीएसएस जोड़ते हैं, तो आपका HTML आपके लिए समझने में बहुत गड़बड़ हो जाएगा।

एक HTML पृष्ठ के लिए शैली टैग को परिभाषित करने के लिए आंतरिक CSS का उपयोग किया जाता है। इसे <head> अनुभाग में <style> तत्व के रूप में परिभाषित किया गया है। एक उदाहरण की मदद से बाहरी CSS को समझते हैं।

<head>
     <style>
              p{
                   color: purple;
                 }
     <style>
<head>

उपरोक्त कोड लिखने से, हमें आउटपुट निम्नानुसार मिलेगा-


यहां ध्यान देने वाली एक महत्वपूर्ण बात यह है कि इनलाइन सीएसएस को आंतरिक सीएसएस की तुलना में अधिक प्राथमिकता दी जाती है।

जब आप कई पृष्ठों पर परिवर्तन करना चाहते हैं तो बाहरी CSS का उपयोग ज्यादातर किया जाता है। यह एक आदर्श स्थिति है क्योंकि यह आपको केवल एक फ़ाइल को बदलकर संपूर्ण वेबसाइट का रूप बदलने की सुविधा देती है। हम <head> अनुभाग में <link> टैग का उपयोग करके स्टाइलशीट जोड़ देंगे।

<head>
       <link rel= “stylesheet” href= “tut13.css”>
<head>

फिर tut13.css फ़ाइल में, हम अपना CSS लिख सकते हैं-

p{
       Color: greenyellow;
}

इस कोड को लिखकर, और इसे HTML फ़ाइल से जोड़कर, आप परिवर्तन को नोटिस करते हैं-

यहां याद रखने वाली बात यह है कि चाहे वह आंतरिक सीएसएस हो या बाहरी सीएसएस, जो भी लिखा जाता है, को प्राथमिकता मिलती है। लेकिन अगर आप चाहते हैं कि पहले व्यक्ति को प्राथमिकता मिलनी चाहिए, तो आप इसके बाद महत्वपूर्ण जोड़ सकते हैं। परिणाम होगा, इसे सभी की सबसे अधिक प्राथमिकता मिलेगी।

तो मुझे उम्मीद है कि आप हमारी वेबसाइट को स्टाइल करने के लिए इस्तेमाल किए गए सीएसएस के सभी तीन प्रकारों को समझ गए होंगे। अगले ट्यूटोरियल से, हम सीएसएस के बारे में कुछ और दिलचस्प गुण देखेंगे। तब तक ट्यूटोरियल के साथ रहें और अब तक जो भी पढ़ाया जाता है उसका अभ्यास करते रहें।

No Source Code