Theory
Form जिसने लोगों को डरा दिया
आपने FestConnect का registration page plain HTML में बनाया। यह काम करता है, पर यह 1998 के एक office form जैसा दिखता है: white पर black Times text, एक चिपका हुआ blue title, postage stamps जितने बड़े buttons। Students इसे खोलते हैं और बंद कर देते हैं।
Structure ठीक है। जो missing है वह style है: colours, spacing, fonts। Web design में, style एक अलग language में रहती है, CSS (Cascading Style Sheets), और आपका पहला decision सिर्फ़ यह है इसे कहाँ रखें। Exactly तीन जगहें हैं।
Theory
Sticky note, page rules, house rulebook
एक school notice को style करना सोचिए:
- Inline एक line पर चिपका एक sticky note है: यह सिर्फ़ उस line को बदलता है।
- Internal उस एक notice के top पर लिखा rule है: यह पूरे notice को govern करता है।
- External school की printed rulebook है जो हर notice follow करता है।
CSS के लिए वही तीन choices: एक tag पर, एक page के top पर, या एक shared file में जिसे पूरी site मानती है।
Theory
तीन तरीक़े, formally
- Inline CSS: एक single element पर एक
styleattribute। सिर्फ़ उस एक tag को style करता है। - Internal (embedded) CSS: page के
<head>के अंदर एक<style>block। उस पूरे page को style करता है। - External CSS: एक अलग
.cssfile में rules,<head>में एक<link>tag से खींची गई। इसे link करने वाले हर page को style करता है।
तीनों एक ही rule shape लिखते हैं: एक selector फिर { property: value; }, जैसे h1 { color: crimson; }।
Practical
वही heading, तीन तरीक़ों से styled
<!-- 1. INLINE: style attribute on the tag itself -->
<h1 style="color: crimson; text-align: center;">FestConnect</h1>
<!-- 2. INTERNAL: a <style> block in the head -->
<head>
<style>
h1 { color: crimson; text-align: center; }
</style>
</head>
<!-- 3. EXTERNAL: link a separate file, put the rule in styles.css -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<!-- styles.css contains: h1 { color: crimson; text-align: center; } -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
कौन सा, और कब
| Method | Scope | किसके लिए बढ़िया |
|---|---|---|
| Inline | सिर्फ़ एक element | एक जल्दी वाला one-off fix; reusable नहीं |
| Internal | पूरा single page | एक one-page site या एक demo |
| External | हर page जो इसे link करे | असली sites: reusable + cached |
Think first
Colour predict कीजिए
styles.css कहता है h1 { color: blue; }। उसी page के <head> में एक internal rule भी है h1 { color: green; } जो link के बाद लिखा गया है। और tag ख़ुद <h1 style="color: crimson;"> है। Heading का colour क्या है? Tap करने से पहले decide कीजिए।
Show the answer
Crimson। Inline styles internal और external दोनों को हराती हैं क्योंकि वे सबसे specific हैं: वे exactly उस element को target करती हैं। अगर आप inline style हटा दें, green जीतेगा, क्योंकि internal rule external के बाद load हुआ था और वे specificity पर tie करते हैं, तो आख़िरी वाला जीतता है (यही 'cascading' है Cascading Style Sheets में)।
Quiz
आप चाहते हैं colours और fonts का एक set FestConnect के सभी 6 pages पर लागू हो, और बाद में इन्हें एक जगह बदल सकें। कौन सा method?
- External CSS: एक .css file जो हर page में link हो
- हर element पर Inline CSS ताकि हर एक explicit हो
- Internal CSS, सभी 6 pages के <head> में copy की गई
- फ़र्क़ नहीं पड़ता, तीनों बिल्कुल एक जैसे behave करते हैं
Show the answer
External CSS: एक .css file जो हर page में link हो
External एक multi-page site के लिए जीतता है: एक file, हर जगह link की गई, एक बार edit की गई। Inline (B) का मतलब होगा एक colour change के लिए सैकड़ों tags edit करना। Internal (C) काम करता है पर आप वही block 6 heads में copy करेंगे और उन्हें हाथ से sync रखेंगे। वे identical नहीं हैं (D): scope और reuse अलग हैं, जो इस topic का पूरा point है।
Watch out
Precedence trap
Exams पूछते हैं: "conflict होने पर कौन सा rule जीतता है?" Order है inline > internal/external specificity से, फिर tie पर आख़िरी-load-हुआ जीतता है। एक बहुत common ग़लत answer है 'external हमेशा internal को override करता है'। सच नहीं: यह load order और specificity पर depend करता है, method के नाम पर नहीं।
दूसरा trap: <link> और <style> tags <head> में होते हैं, <body> में नहीं। Styles को body में डालना browsers में अक्सर फिर भी काम करता है पर exams में ग़लत माना जाता है।
Theory
Bootstrap बस external CSS है
अगली unit में आप Bootstrap जोड़ेंगे एक .css file को एक <link> से paste करके। यह external CSS है, exactly ऊपर वाला pattern, बस किसी और ने लिखा। बाद में मिलने वाला हर framework (Bootstrap, फिर बड़े वाले) fundamentally एक बड़ी external stylesheet है जिसे आप link करते हैं और फिर अपनी CSS से override करते हैं।
Summary
Key takeaways
- CSS तीन तरीक़ों से जुड़ती है: inline (style attribute, एक tag), internal (head में <style>, एक page), external (.css file पर <link>, कई pages)।
- तीनों एक ही rule shape इस्तेमाल करते हैं: selector { property: value; }।
- Precedence: inline internal/external को specificity से हराता है; बराबर rules आख़िरी-load-हुआ-जीतता-है से resolve होते हैं (cascade)।
- External professional default है: pages में reusable और browser द्वारा cached।
- <style> और <link> <head> में रहते हैं, <body> में नहीं।
- Memory hook: sticky note, page rules, house rulebook।