CSS कैसे जोड़ें
5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
वेब पेज में CSS जोड़ने के तीन तरीके हैं: inline, internal और external। तीनों का काम एक ही है — वे rules को आपके HTML से जोड़ते हैं — लेकिन वे अलग-अलग जगह रहते हैं, और अलग-अलग मौके पर काम आते हैं। असली वेबसाइटें लगभग हमेशा external तरीका इस्तेमाल करती हैं। तीनों सीख लीजिए, फिर सही वाला चुनिए।
तीन तरीके
| तरीका | कहाँ रहता है | किसके लिए अच्छा है |
|---|---|---|
| Inline | एक element पर style attribute में | एक element पर एक छोटा-सा तुरंत fix |
| Internal | <head> के अंदर <style> block में | एक अकेला पेज |
| External | अलग .css file में, <link> से जुड़ा हुआ | पूरी वेबसाइट |
सिंटैक्स — तीनों तरीके
Inline: style सीधे element पर बैठता है। यह सिर्फ उसी एक element को प्रभावित करता है।
<h1 style="color: blue;">Hello</h1>
Internal: नियम head के अंदर <style> block में रहते हैं। वे पूरे पेज को प्रभावित करते हैं।
<head>
<style>
h1 { color: blue; }
</style>
</head>
External: नियम अलग file में रहते हैं, जैसे style.css, और पेज उससे link करता है। एक file सौ पेजों को सजा सकती है।
<head> <link rel="stylesheet" href="style.css"> </head>
<link> tag <head> के अंदर ही होना चाहिए, और href असली file की ओर इशारा करना चाहिए। अगर path गलत है — एक folder भी गलत — तो पेज बिना किसी styling के लोड होता है, और browser कोई error message भी नहीं देता। जब कोई पेज अचानक सादा दिखने लगे, तो सबसे पहले stylesheet का link जाँचिए।Cascade — कौन-सा नियम जीतता है?
जब दो नियम एक ही element के बारे में असहमत हों, तो browser cascade का पालन करता है — tie-breakers का एक सेट, इस क्रम में:
- Inline styles जीतते हैं internal और external styles पर।
- बाद वाले नियम जीतते हैं पहले वालों पर, जब वे बराबर मज़बूत हों।
- ज़्यादा specific selectors जीतते हैं कम specific वालों पर। Id class को हराता है, class element को हराता है। इसे specificity कहते हैं।
तो #title { color: red; }, .heading { color: blue; } को हराता है, जो h1 { color: green; } को हराता है — भले ही h1 वाला नियम सबसे बाद में आए। Browser हर selector की ताकत गिनता है, सिर्फ क्रम नहीं।
!important — आपातकालीन override
एक चीज़ ऐसी है जो सबको हरा देती है: value के बाद !important जोड़ देना।
p { color: red !important; }
यह नियम inline styles, ids और बाकी सब पर जीतता है। यह आपातकाल के लिए है — जैसे जब आपको किसी ऐसी library का style बदलना हो जिसे आप edit नहीं कर सकते। लेकिन इसका इस्तेमाल लगभग कभी मत कीजिए। एक बार project में !important आ जाए, तो लोग पहले वाले को हराने के लिए और जोड़ने लगते हैं, और जल्द ही कोई नहीं जानता कि कौन-सा नियम जीतता है। !important से भरी stylesheet इस बात का संकेत है कि selectors को ठीक करने की ज़रूरत है, ज़्यादा ज़ोर लगाने की नहीं।
आम गलतियाँ
- Stylesheet को गलत path से link करना — file का नाम
style.cssहै और आपनेhref="styles.css"लिखा, या file किसी और folder में है। - हर जगह inline styles इस्तेमाल करना — शुरू में तेज़, बाद में सँभालना नामुमकिन। एक रंग बदलने का मतलब है हर element को हाथ से बदलना।
- यह उम्मीद करना कि internal नियम inline style को हरा देगा — inline हमेशा जीतता है, जब तक internal नियम
!importantन इस्तेमाल करे। - हर नियम पर
!importantछिड़क देना — यह cascade को खत्म कर देता है और आगे के बदलावों को लड़ाई बना देता है। - यह भूल जाना कि बाद वाला नियम तभी जीतता है जब specificity बराबर हो — बाद वाला element selector भी पहले वाले id selector से हार जाता है।
याद रखें
- Inline =
styleattribute, internal = head में<style>, external =.cssfile से<link>। - External professional तरीका है — एक file पूरी साइट को सजाती है।
- Cascade का क्रम: inline जीतता है, फिर ज़्यादा specific selector, फिर बाद वाला नियम।
- Specificity: id class को हराता है, class element को हराता है।
!importantसबको हराता है — सिर्फ असली आपातकाल में इस्तेमाल करें।
उदाहरण समझिए
h1 { color: green; }—<style>block का internal नियम। यह पेज के हरh1को हरा कर देता है।<h1 style="color: blue;">— पहली heading पर inline style। Inline internal नियम पर जीतता है, इसलिए यह heading हरी नहीं, नीली है।<h1>Our Courses</h1>— दूसरी heading पर कोई inline style नहीं है, इसलिए internal नियम लागू होता है और वह हरी है।.note { color: grey; }— उसी internal block का class नियम। यहclass="note"वाले paragraph को style करता है।<!-- <link rel="stylesheet" href="style.css"> -->— comment external तरीका दिखाता है। असली साइट में यह line (comment के निशान हटाकर) internal block की जगह shared stylesheet लोड करेगी।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>How to Add CSS</title>
<style>
h1 { color: green; }
.note { color: grey; }
</style>
<!-- In a real site, use this instead of the style block above:
<link rel="stylesheet" href="style.css"> -->
</head>
<body>
<h1 style="color: blue;">Welcome to KAMALDNP</h1>
<h1>Our Courses</h1>
<p class="note">The first heading is blue because its inline style beats the internal rule. The second heading is green because only the internal rule applies to it.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
Check yourself — did you get it?
Finished the lesson? Test yourself with 5 quick questions — you get the answer instantly, with the reason for each one.
1. Which way of adding CSS is best for a whole website?
2. Where must the <link> tag for a stylesheet sit?
3. When an inline style and an internal rule disagree, which one wins?
4. Which selector wins in a fight: #title, .heading, or h1?
5. What does !important do?
Interview questions — can you answer these?
Read the question first, try to answer it in your own words, then open it to check. These are the questions interviewers actually ask.
1. What are the three ways to add CSS to a page, and which one should you use for a real website?
Inline (a style attribute on one element), internal (a <style> block in the <head>, for one page), and external (a separate .css file linked with <link>). For a real website, use external — one file styles the whole site, so a colour change in one place updates every page.
2. When two CSS rules disagree, which one wins?
The browser follows the cascade, in this order: inline styles win over internal and external styles; then the more specific selector wins — an id beats a class, a class beats an element (this is specificity); and when two rules are equally specific, the later one wins.
3. What does !important do, and why should you almost never use it?
!important after a value beats everything — inline styles, ids, all of it. It exists for emergencies, like overriding a style from a library you cannot edit. But use it almost never: once it appears, people add more of it to beat the first one, and soon nobody can tell which rule wins. A stylesheet full of !important means the selectors need fixing, not more force.
Try it yourself — build this
Reading is not enough — now build it yourself. Write the code in the live editor, run it, check the hint if you get stuck, and open the solution only after you have tried.
1. Three ways, one winner
Create a page that shows the three ways to add CSS AND the cascade. Put an internal rule in a <style> block (h1 green, .note grey). Give the first <h1> an inline style that makes it blue — inline beats internal, so it must end up blue while the second <h1> stays green. Then add an HTML comment in the <head> showing the external way: the <link rel="stylesheet" href="style.css"> line, commented out.
Show solution
<!DOCTYPE html>
<html>
<head>
<title>How to Add CSS</title>
<style>
h1 { color: green; }
.note { color: grey; }
</style>
<!-- In a real site, use this instead of the style block above:
<link rel="stylesheet" href="style.css"> -->
</head>
<body>
<h1 style="color: blue;">Welcome to KAMALDNP</h1>
<h1>Our Courses</h1>
<p class="note">The first heading is blue because its inline style beats the internal rule. The second heading is green because only the internal rule applies to it.</p>
</body>
</html>खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 30 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
