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

HTML CSS

आप पहले ही style एट्रिब्यूट और रंग मानों से छोटे लुक बदलाव अभ्यास कर चुके हैं। असली साइटें शायद ही हर डिज़ाइन नियम हर टैग पर रखती हैं। CSS (Cascading Style Sheets) वह भाषा है जो लुक-एंड-फील बताती है। यह सेशन HTML CSS कैसे लोड करता है — तीन आम तरीकों पर केंद्रित है — अभी पूरा डिज़ाइन सिस्टम बनाने पर नहीं। यह समझना कि नियम कहाँ रहते हैं, बाद में सुधार का समय बचाता है और अभ्यास पेजों को असली प्रोजेक्ट के फ्लो के करीब लाता है। जब आपको पता हो कि किस तरह का स्टाइल कहाँ रहता है, तो बाद के CSS कोर्स में जाना आसान हो जाता है, क्योंकि जटिल लेआउट नियमों से पहले आप पेज को फ़ाइल से सही जोड़ लेते हैं।

CSS यहाँ क्या कर रहा है?

HTML सामग्री की संरचना बनाता है। CSS प्रस्तुति बताता है: रंग, स्पेसिंग, फ़ॉन्ट और लेआउट विचार जिन्हें आप बाद में गहराई से सीखेंगे। आपका HTML पेज एक एलिमेंट पर कुछ CSS घोषणाएँ रख सकता है, दस्तावेज़ के अंदर छोटी stylesheet रख सकता है, या अलग .css फ़ाइल की ओर इशारा कर सकता है। सही जगह चुनना डेमो तेज़ और असली प्रोजेक्ट रखरखाव योग्य रखता है। अगर सब कुछ हर टैग पर इनलाइन हो, अपडेट धीमा और दोहराव वाला हो जाता है; अगर जल्दी बाहरी फ़ाइल लिंक करें, तो वह साझा करने की आदत अभ्यास होती है जिस पर असली साइटें निर्भर करती हैं। यहाँ लक्ष्य गुणों की लाइब्रेरी याद करना नहीं, बल्कि HTML से ब्राउज़र द्वारा लागू नियम तक लोड पथ समझना है।

सीधा उत्तर

तेज़ परीक्षण के लिए एक एलिमेंट पर style="..." वाला इनलाइन CSS उपयोग करें। एक-पेज अभ्यास के लिए आमतौर पर <head> में आंतरिक <style>...</style> ब्लॉक रखें। जब कई पेज एक ही लुक साझा करें तो <link rel="stylesheet" href="styles.css"> से जुड़ी बाहरी .css फ़ाइल उपयोग करें। जैसे ही पुनःउपयोग और साफ़ HTML मायने रखें, बाहरी CSS पसंद करें। यह सरल नियम तेज़ डेमो को पूरे साइट स्टाइल से मिलाने से बचाता है; हर विधि की स्पष्ट भूमिका है, और इनलाइन से बाहरी की ओर जाना सीखने का स्वाभाविक कदम है, असफलता नहीं।

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

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

विधि कहाँ सबसे अच्छा किसके लिए
इनलाइन टैग पर style एट्रिब्यूट छोटे एकबारगी परीक्षण
आंतरिक head में style एलिमेंट एक-पेज डेमो
बाहरी .css फ़ाइल + link साझा साइट स्टाइलिंग

इनलाइन CSS (याद दिलाना)

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

इनलाइन CSS याद दिलाना

html
HTML Code 
<p style="color: teal;">एक एलिमेंट पर इनलाइन CSS</p>

इनलाइन अभी भी कब मदद करता है

  • एक रंग या आकार जल्दी जाँचना
  • पिछली सेशनों से property:value विचार सिखाना
  • सीखते समय अस्थायी ओवरराइड — फिर नियम stylesheet में ले जाएँ
    पूरा बहु-पेज ब्रांड सिर्फ इनलाइन एट्रिब्यूट से न बनाएँ। वह रास्ता अपडेट करना कठिन हो जाता है, फ़ाइलों के बीच वही नियम साझा करना मुश्किल बनाता है, और बाद में पूरे साइट पर रंग बदलना धीमा कर देता है। छोटे प्रयोगों के लिए इनलाइन रखें, फिर जल्दी आंतरिक ब्लॉक या बाहरी फ़ाइल पर जाएँ।

head में आंतरिक CSS

आंतरिक stylesheet एक <style> एलिमेंट है जो वर्तमान HTML फ़ाइल के CSS नियम रखता है। शुरुआती आमतौर पर इसे <head> में रखते हैं ताकि body सामग्री से पहले स्टाइल घोषित हो। यह क्रम ब्राउज़र और सीखने वाले दोनों की मदद करता है: नियम पेज के ऊपर एक जगह दिखते हैं, सामग्री के बीच खोजने की ज़रूरत नहीं। आंतरिक ब्लॉक तब फिट बैठता है जब आप कई नियम अभ्यास करते हैं लेकिन अभी एक ही HTML फ़ाइल पर काम कर रहे हों।

head में आंतरिक CSS

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

आंतरिक उदाहरण पढ़ना

  • style एलिमेंट में CSS है, पेज संरचना के HTML टैग नहीं
  • p { color: navy; } का मतलब है «इस दस्तावेज़ में सभी p एलिमेंट को नेवी टेक्स्ट मिले»
  • एक नियम कई पैराग्राफ को बिना हर टैग पर style="..." दोहराए स्टाइल कर सकता है
  • आंतरिक CSS अभी भी इसी एक HTML फ़ाइल में बंद है — अन्य पेज इसे तब तक नहीं देखते जब तक आप ब्लॉक कॉपी न करें
  • उसी ब्लॉक में और नियम जोड़ सकते हैं, जैसे h1 के लिए, बिना अभी दूसरी फ़ाइल खोले

link के साथ बाहरी CSS

बाहरी CSS नियम किसी styles.css जैसी फ़ाइल में रखता है। HTML link एलिमेंट से उस फ़ाइल से जुड़ता है। यह साझा साइट स्टाइलिंग का सामान्य पैटर्न है। जब शीर्षक का रंग बाहरी फ़ाइल में एक बार बदले, सभी लिंक किए पेज प्रभावित होते हैं — हर फ़ाइल में आंतरिक ब्लॉक कॉपी करने के मुकाबले यही बड़ा लाभ है। HTML के बगल में CSS से शुरू करें, फिर रास्ते मज़बूत होने पर फ़ोल्डर व्यवस्थित करें।

बाहरी stylesheet लिंक

html
HTML Code 
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

बाहरी CSS काम करे इसके लिए क्या सही होना चाहिए

  • link को rel="stylesheet" चाहिए ताकि ब्राउज़र संबंध समझे
  • href सही पथ से असली CSS फ़ाइल की ओर इशारा करे (File Paths सेशन देखें)
  • styles.css के अंदर आप p { color: navy; } और h1 { color: darkgreen; } जैसे नियम लिखते हैं
  • अगर पथ गलत हो, HTML फिर भी खुलता है — लेकिन बिना स्टाइल दिखता है
  • कुछ सर्वर पर फ़ाइल नाम केस-सेन्सिटिव हो सकते हैं; href में नाम को डिस्क पर असली नाम से मिलाएँ
    पहले अभ्यास में CSS फ़ाइल HTML के बगल में रखें; सबफ़ोल्डर तभी आज़माएँ जब रास्ते ठोस लगें। जानबूझकर लिंक तोड़कर फिर ठीक करना सिर्फ़ सिद्धांत पढ़ने से तेज़ आँख प्रशिक्षित करता है।

विधि चुनना

पूछें कि स्टाइल कितनी दूर तक जाना चाहिए:

  • एक एलिमेंट पर तेज़ प्रयोग → इनलाइन
  • एक अभ्यास पेज, कई नियम → head में आंतरिक <style>
  • कई पेज, एक साझा लुक → बाहरी .css + link
    जब बाद में पूरे CSS कोर्स में जाएँगे, बाहरी stylesheet असली प्रोजेक्ट का डिफ़ॉल्ट बन जाती है। यह HTML सेशन सुनिश्चित करता है कि जटिल लेआउट से पहले आप उन्हें सही जोड़ सकें। छोटे अभ्यास में कोई «गलत विधि» नहीं; गलती तब है जब साइट को असली साझाकरण चाहिए हो फिर भी सब कुछ इनलाइन रखें। पुनःउपयोग की चौड़ाई से मेल खाती विधि चुनें, और प्रोजेक्ट की ज़रूरत बदलने तक उसी पर रहें।

अपने एडिटर में अभ्यास

  1. एक शीर्षक और दो पैराग्राफ वाला page.html बनाएँ।
  2. h1 रंगने वाला और p स्टाइल करने वाला नियम वाला styles.css बनाएँ।
  3. HTML head में <link rel="stylesheet" href="styles.css"> जोड़ें।
  4. पेज खोलें। अगर स्टाइल न हों, पथ और rel जाँचें।
  5. अस्थायी रूप से styles.css का नाम बदलें या स्थानांतरित करें, रीलोड करें, विफलता देखें, फिर href ठीक करें।
  6. वैकल्पिक: एक नियम आंतरिक <style> ब्लॉक में ले जाकर तुलना करें।
    जानबूझकर लिंक तोड़ना सिर्फ़ पढ़ने से तेज़ पथ गलतियाँ सिखाता है। पेज के बगल वाला लिंक काम करने के बाद छोटे सबफ़ोल्डर में फ़ाइल के साथ अभ्यास दोहराएँ, जब तक आप भरोसा करें कि href फ़ाइल का असली स्थान दर्शाता है। रीलोड से पहले हमेशा सेव करें ताकि न लगे कि ब्राउज़र ने वह नियम नज़रअंदाज़ किया जिसे आपने सेव नहीं किया।

गलतियाँ जो पेज को बिना स्टाइल छोड़ देती हैं

  • link पर rel="stylesheet" भूलना
  • styles.css दूसरे फ़ोल्डर में रखना लेकिन ऐसे लिंक करना जैसे HTML के बगल में हो
  • एक साझा stylesheet की जगह हर टैग को इनलाइन style से भरना
  • आदत से बड़ा <style> ब्लॉक body के अंत में डालना जबकि शुरुआती के लिए head साफ़तर है
  • CSS फ़ाइल संपादित करना लेकिन लिंक किए से अलग HTML फ़ाइल रीफ़्रेश करना
  • href में ऐसा फ़ाइल नाम लिखना जो स्पेस या एक्सटेंशन में डिस्क की असली फ़ाइल से अलग हो
    इनमें से हर गलती समय गंवाती है या यह भ्रम देती है कि «CSS काम नहीं करता» जबकि समस्या वायरिंग की है। पेज को विज़िटर की तरह पढ़ें: स्टाइल पहुँचा? क्या आप जानते हैं कि नियम किस फ़ाइल से आ रहा है?

सारांश

  • CSS HTML को स्टाइल करता है; HTML इनलाइन, आंतरिक या बाहरी CSS लोड कर सकता है
  • इनलाइन style छोटे परीक्षणों के लिए ठीक है, पूरी साइटों के लिए नहीं
  • head में आंतरिक <style> एक-फ़ाइल अभ्यास के लिए उपयुक्त है
  • बाहरी .css प्लस link rel="stylesheet" सामान्य साझा दृष्टिकोण है
  • सही फ़ाइल पथ CSS नियमों जितने ही ज़रूरी हैं
  • वह विधि पसंद करें जो स्टाइल की पुनःउपयोग चौड़ाई से मेल खाए
    इस क्रम में आप स्पष्ट आदत बनाते हैं: ज़रूरत हो तो तेज़ परीक्षण, अभ्यास पेज पर नियम व्यवस्थित करें, फिर पेज बढ़ने पर साझा फ़ाइल लिंक करें — और नियम पर दोष लगाने से पहले हमेशा पथ और rel जाँचें।

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

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

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

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

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

📝 निर्देश

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