CodeX Cider Logo
CodeX Cider
CSS टॉपिक्स
🎨 CSS Design✨पाठ 2 / 16

How to Include CSS

आज हम CSS को पेज से जोड़ते हैं — प्रोफ़ेशनल डिफ़ॉल्ट external stylesheet है link के साथ; style tag और inline छोटे मामलों के लिए।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

इस पाठ में आप क्या सीखेंगे

  1. 01CSS को HTML से जोड़ने के 3 रास्ते: External, Internal, Inline
  2. 02External CSS को इंडस्ट्री का गोल्ड स्टैंडर्ड क्यों मानते हैं
  3. 03<link rel='stylesheet'> टैग कैसे काम करता है
  4. 04ब्राउज़र कैशिंग से एक्सटर्नल CSS पेज को सुपरफास्ट कैसे बनाती है
  5. 05प्रायोरिटी का नियम: Inline स्टाइल External पर कैसे भारी पड़ती है
1. External File⭐ सर्वोत्तम तरीका
<link rel="stylesheet" href="style.css">

अलग .css फ़ाइल में रहता है। एक साथ हज़ारों पेजों को स्टाइल करता है और ब्राउज़र इसे कैश (याद) रख लेता है।

2. Internal Blockकेवल इस पेज पर
<style> p { color: red; } </style>

HTML के <head> में लिखा जाता है। सिर्फ इसी एक पेज पर लागू होता है। छोटे डेमो या टेस्टिंग के लिए ठीक है।

3. Inline Attributeबचने की कोशिश करें
<p style="color: red;">

सीधे टैग के ऊपर चिपका दिया जाता है। जीत इसकी ही होती है, पर कोड बहुत गंदा हो जाता है और मेंटेन करना नामुमकिन हो जाता है।

  1. 1

    CSS को HTML से जोड़ने के 3 दरवाज़े

    पिछले पाठ में हमने नियम लिखना सीखा। पर वह नियम कहाँ रहेगा और ब्राउज़र को कैसे मिलेगा जब कोई हमारी वेबसाइट खोलेगा?

    HTML इसके लिए तीन रास्ते देता है:

    • External Stylesheet: अलग .css फ़ाइल, जिसे <head> में लिंक करते हैं।
    • Internal Styles: <head> के अंदर <style> टैग का ब्लॉक।
    • Inline Styles: किसी एक टैग के ऊपर style="..." एट्रिब्यूट।
  2. 2

    External CSS पूरी दुनिया में नंबर 1 क्यों है?

    सोचो Amazon या Wikipedia जैसी वेबसाइट पर 50,000 वेबपेज हैं। अगर आप इनलाइन या इंटरनल CSS का इस्तेमाल करते, तो नेवबार का रंग बदलते समय आपको 50,000 फ़ाइलों को एडिट करना पड़ता!

    एक्सटर्नल CSS में सारे 50,000 पेज एक ही styles.css फ़ाइल से जुड़े होते हैं। आप 1 सेकंड में 1 लाइन बदलते हैं और पूरी वेबसाइट का रंग बदल जाता है। इसके अलावा ब्राउज़र उस फ़ाइल को पहली बार में ही डाउनलोड करके कैश (Memory) में सहेज लेता है, जिससे अगले सारे पेज तुरंत खुलते हैं।

  3. 3

    ब्राउज़र स्टाइल्स को कैसे लोड करता है

    ब्राउज़र ऊपर से नीचे पढ़ता है। <head> के अंदर <link rel="stylesheet"> रखने से ब्राउज़र बॉडी ड्रा करने से पहले ही डिज़ाइन नियम डाउनलोड कर लेता है। इससे यूज़र को कभी भी बिना स्टाइल वाला कच्चा पेज नहीं दिखता।

    अगर एक्सटर्नल और इनलाइन में लड़ाई हो जाए, तो इनलाइन जीत जाता है क्योंकि वह उस एलिमेंट के सबसे नज़दीक बैठा होता है।

  4. 4

    आज की प्रैक्टिस: वास्तविक HTML में स्टाइल जोड़ना

    नीचे दिए गए कोड में देखें कि कैसे <link> टैग एक्सटर्नल फ़ाइल जोड़ता है, जबकि इंटरनल <style> पेज-लेवल नियम देता है।

  5. 5

    अहम नियम: हमेशा External Stylesheet को पहली पसंद बनाएँ

    हमेशा अपनी शैलियों को अलग .css फ़ाइल में रखें। Internal सिर्फ सिंगल-पेज डेमो के लिए रखें, और Inline का उपयोग केवल आपातकालीन डीबगिंग में ही करें।

Interactive Live Editor
index.html
Click & type to editHTML5
लाइव प्रीव्यू

लाइन-बाय-लाइन विश्लेषण

  1. <link rel="stylesheet" href="/styles.css">

    एक्सटर्नल CSS कनेक्शन। rel="stylesheet" बताता है कि यह स्टाइल फ़ाइल है, और href उस फ़ाइल का पता (path) देता है। इसे <head> में रखें।

  2. <style> ... </style>

    इंटरनल CSS ब्लॉक। यह सीधे HTML के <head> में बैठता है और सिर्फ इसी एक पेज के टैग्स पर नियम लागू करता है।

  3. style="color: #ce050b;"

    इनलाइन CSS एट्रिब्यूट। सीधे किसी खास एलिमेंट पर चिपकता है। बहुत शक्तिशाली होता है पर पूरी साइट में इसका रखरखाव बहुत मुश्किल है।

खुद ट्राई करो

एक छोटा HTML दस्तावेज़ बनाओ जिसके <head> में main.css से जुड़ने वाला <link> टैग हो, और साथ ही एक इंटरनल <style> टैग हो जो h2 को गहरा इंडिगो रंग दे और सेंटर अलाइन करे।

हिंट: <link> और <style> दोनों <head> सेक्शन के अंदर जाते हैं।

💡 समाधान देखें (यदि अटक गए हों)
<!DOCTYPE html>
<html>
  <head>
    <title>मेरी वेबसाइट</title>
    <!-- 1. External CSS Link -->
    <link rel="stylesheet" href="main.css">
    
    <!-- 2. Internal CSS Block -->
    <style>
      h2 {
        text-align: center;
        font-weight: bold;
        color: #4f46e5;
      }
    </style>
  </head>
  <body>
    <h2>स्टाइलिंग बेहद आसान है</h2>
  </body>
</html>
त्वरित ज्ञान जाँच

बड़ी और वास्तविक वेबसाइटों पर इनलाइन स्टाइल की जगह External CSS (<link rel='stylesheet'>) का इस्तेमाल क्यों किया जाता है?

गलती कहाँ होती है

  • 1.<link> को <body> के अंदर डाल देना। इसे हमेशा <head> में रखें।
  • 2.rel="stylesheet" लिखना भूल जाना; इसके बिना ब्राउज़र उस फ़ाइल को पहचानता ही नहीं।
  • 3.एक ही <style> ब्लॉक को 20 अलग-अलग पेजों पर कॉपी-पेस्ट करना।

इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)

Q: HTML में CSS जोड़ने के 3 मुख्य तरीके कौन से हैं?▼

1. External: <head> में <link rel="stylesheet" href="..."> द्वारा।
2. Internal: <head> में <style> टैग द्वारा।
3. Inline: किसी भी HTML टैग पर style="..." एट्रिब्यूट लिखकर।

Q: अगर किसी एलिमेंट पर External फ़ाइल और Inline एट्रिब्यूट दोनों में नियम हों, तो कौन जीतेगा?▼

Inline स्टाइल जीतेगी क्योंकि उसकी स्पेसिफिसिटी (1-0-0-0) एक्सटर्नल क्लास या एलिमेंट सेलेक्टर से कहीं अधिक होती है, बशर्ते एक्सटर्नल रूल में !important न लगा हो।

Q: FOUC क्या है और CSS को <head> में रखने से यह कैसे रुकता है?▼

FOUC का मतलब है Flash of Unstyled Content (कच्चा अनस्टाइल कंटेंट एक पल के लिए दिख जाना)। अगर CSS देर से लोड हो, तो यूज़र को पहले भद्दा टेक्स्ट दिखता है और फिर अचानक डिज़ाइन आता है। <head> में रखने से ब्राउज़र पेज ड्रॉ करने से पहले ही डिज़ाइन तैयार रखता है।

अगला लेसनSelectors & Specificity