लोड हो रहा है...

CSS कैसे जोड़ें

आप CSS के नियम बिल्कुल सही लिख सकते हैं और फिर भी पेज में कोई बदलाव न दिखे — अगर ब्राउज़र ने उन्हें कभी लोड ही नहीं किया। इस सत्र में आप CSS को HTML से जोड़ने के तीन आम तरीके देखेंगे, और यह भी कि डिफ़ॉल्ट रूप से किसे चुनना चाहिए।

HTML पेज में CSS कैसे जोड़ी जाती है?

तीन तरीके हैं: head से लिंक की गई बाहरी stylesheet, head में आंतरिक <style> ब्लॉक, या किसी एक एलिमेंट पर inline style एट्रिब्यूट। असली साइटों और कई पेज वाले प्रोजेक्ट के लिए अलग .css फ़ाइल से शुरुआत करें।

तीनों तरीके एक नज़र में

कोड लिखने से पहले इस तालिका से सही तरीका चुनें। आगे हर तरीके का एक छोटा उदाहरण मिलेगा।

📊 CSS जोड़ने के तरीके

तरीका कहाँ रहता है कई पेजों में दोबारा उपयोग रोज़मर्रा का सबसे अच्छा उपयोग
बाहरी stylesheet अलग .css फ़ाइल + head में <link> बहुत अच्छा प्रोजेक्ट और इस कोर्स का डिफ़ॉल्ट तरीका
आंतरिक CSS HTML के head में <style> … </style> सिर्फ़ एक पेज तेज़ डेमो और एक फ़ाइल में अभ्यास
Inline CSS किसी एक HTML एलिमेंट पर style="…" नहीं छोटा-मोटा एक बार का बदलाव (कम इस्तेमाल करें)

बाहरी stylesheet (सुझाया गया डिफ़ॉल्ट)

HTML और CSS को अलग-अलग फ़ाइलों में रखें। head में link एलिमेंट से अपनी stylesheet की ओर इशारा करें; ब्राउज़र CSS फ़ाइल लाकर उसके नियम लागू कर देता है।

बाहरी stylesheet को लिंक करना

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

नियम styles.css में लिखें, जो HTML फ़ाइल के बगल में हो (अगर फ़ाइल किसी सब-फ़ोल्डर में है तो href में सही पथ दें):

बाहरी फ़ाइल styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

असली काम में बाहरी फ़ाइल क्यों बेहतर है

  • एक stylesheet से कई HTML पेजों को स्टाइल किया जा सकता है
  • लुक बदलने के लिए मार्कअप में स्टाइल ढूँढते नहीं फिरना पड़ता
  • ब्राउज़र .css फ़ाइल को cache कर सकता है, इसलिए हर पेज पर उसे दोबारा नहीं मँगवाता
  • rel="stylesheet" और सही href का ध्यान रखें — पथ में एक छोटी-सी टाइपिंग की गलती से पेज बिना किसी चेतावनी के बिना स्टाइल का रह जाता है

आंतरिक CSS (head में <style>)

एक अभ्यास पेज के लिए आप नियम head के <style> एलिमेंट के अंदर लिख सकते हैं। Introduction और Syntax वाले सत्रों में हमने यही तरीका अपनाया था ताकि HTML और CSS एक ही फ़ाइल में रहें।

आंतरिक style ब्लॉक

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

आंतरिक CSS कब ठीक है

डेमो और ऐसे होमवर्क के लिए, जिसे एक ही फ़ाइल में जमा करना हो, आंतरिक CSS बिल्कुल ठीक है। लेकिन प्रोजेक्ट बढ़ने पर यह साथ नहीं देता: हर पेज में वही <style> ब्लॉक कॉपी करने से संस्करण अलग-अलग होने लगते हैं और अपडेट करना मुश्किल हो जाता है। एक से ज़्यादा पेज होते ही — या जब आप कोड को साफ़-सुथरा बाँटना चाहें — बाहरी फ़ाइल पर आ जाएँ।

Inline CSS (style एट्रिब्यूट)

Inline CSS में आप declarations सीधे एलिमेंट पर style एट्रिब्यूट से लिखते हैं। न कोई selector होता है, न अलग फ़ाइल — बस वही एक एलिमेंट स्टाइल होता है।

Inline style एट्रिब्यूट

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

कम इस्तेमाल करें

Inline styles किसी अस्थायी जाँच के लिए तेज़ हैं, पर वे डिज़ाइन को मार्कअप में मिला देते हैं, उन्हें दोबारा इस्तेमाल करना कठिन है, और cascade व specificity का सवाल आने पर उन्हें बाद में override करना भी मुश्किल होता है। stylesheet में class का उपयोग करना बेहतर है। cascade के टकराव वाले नियम आगे के सत्रों में आएँगे; अभी inline को अपवाद मानें, आदत नहीं।

कौन-सा तरीका चुनें?

  • साइट बनाना या इस कोर्स के प्रोजेक्ट करना: बाहरी stylesheet
  • कक्षा में एक छोटी डेमो फ़ाइल: आंतरिक <style> चल सकता है
  • डीबग करते समय किसी एक एलिमेंट को कुछ सेकंड के लिए बदलना: inline काम आ सकता है — फिर नियम को stylesheet में ले जाएँ
    तरीकों को मिलाना मना नहीं है। जब एक ही property एक से ज़्यादा जगह सेट हो, तो ब्राउज़र cascade के नियमों से तय करता है (यह आगे पढ़ेंगे)। एक अच्छी आदत: टिकाऊ स्टाइल बाहरी फ़ाइल में रखें और एक ही property को तीनों तरीकों में न बिखेरें।

खुद आज़माएँ

  1. एक ही फ़ोल्डर में howto.html और styles.css बनाएँ।
  2. howto.html में <link rel="stylesheet" href="styles.css"> वाला head जोड़ें और body में यह शीर्षक लिखें: <h1 class="hero">How-to practice</h1>।
  3. styles.css में यह नियम लिखें: .hero { color: #0f766e; }। फिर HTML फ़ाइल को ब्राउज़र में खोलें।
  4. रंग को #1d4ed8 कर दें, CSS फ़ाइल सेव करें और पेज रीफ़्रेश करें — शीर्षक का रंग बदल जाना चाहिए।
  5. कुछ देर के लिए h1 पर style="color: #b45309;" जोड़ें और रीफ़्रेश करें। फिर एट्रिब्यूट हटा दें ताकि रंग दोबारा stylesheet से तय हो।

आम गलतियाँ

  • आदतन <link rel="stylesheet" …> को body में रख देना — इसकी जगह head है, दस्तावेज़ की बाकी जानकारी के साथ
  • href में टाइपो (styles.css की जगह style.css), जिससे फ़ाइल कभी लोड नहीं होती और पेज बिना स्टाइल का दिखता है
  • link एलिमेंट में rel="stylesheet" भूल जाना
  • एक साझा बाहरी फ़ाइल के बजाय हर पेज में पूरा <style> ब्लॉक चिपका देना
  • हर रंग और फ़ॉन्ट के लिए inline style पर निर्भर रहना — मार्कअप भरा-भरा हो जाता है और सँभालना कठिन

सारांश

  • तीन तरीके: बाहरी stylesheet, आंतरिक <style>, inline style एट्रिब्यूट
  • असली पेजों के लिए डिफ़ॉल्ट: head में <link rel="stylesheet" href="…"> के साथ बाहरी फ़ाइल
  • आंतरिक CSS एक फ़ाइल में अभ्यास के लिए ठीक है; inline कभी-कभार के एकल बदलावों के लिए
  • पथ में टाइपो और rel का छूट जाना, स्टाइल के "कुछ न करने" के आम कारण हैं
  • अभ्यास करें: असली .css फ़ाइल लिंक करें, कोई मान बदलें और रीफ़्रेश करें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
Css ट्यूटोरियल