HTML में CSS: Inline, Internal और External तरीका
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
CSS (Cascading Style Sheets) वह भाषा है जो तय करती है कि वेब पेज कैसा दिखेगा: रंग, font, जगह, layout। HTML बनावट बनाता है; CSS उसे रंगता है। किसी पेज में CSS जोड़ने के तीन तरीके हैं।
1. Inline CSS — एक element में
किसी एक element के style attribute में लिखा जाता है: <p style="color: red;">। जाँच के लिए तेज़ है, लेकिन असली पेजों के लिए खराब है — वही style हर element पर दोहरानी पड़ती है।
2. Internal CSS — पूरे पेज के लिए
<head> में एक <style> element के अंदर एक बार लिखा जाता है। यह पूरे पेज पर लागू होता है। एक पेज के लिए अच्छा है, लेकिन हर पेज को अपनी अलग copy चाहिए।
3. External CSS (सही तरीका)
अलग .css file में लिखा जाता है और पेज से link किया जाता है: <link rel="stylesheet" href="styles.css">। एक file पूरी वेबसाइट को style करती है। CSS file में एक line बदलें और हर पेज एक साथ बदल जाता है। हर professional वेबसाइट ऐसे ही काम करती है — kamaldnp.com भी।
CSS elements कैसे चुनता है
CSS rule में एक selector और एक declaration होता है। Selector बताता है कि किन elements को style करना है; declaration बताता है कि कैसे। जैसे, h1 { color: navy; } हर h1 को navy बना देता है। .intro { font-size: 18px; } class "intro" वाले हर element को style करता है। #header { background: orange; } id "header" वाले एक element को style करता है।
CSS क्या है
CSS का पूरा नाम Cascading Style Sheets है। यह एक अलग भाषा है जो तय करती है कि HTML कैसा दिखेगा — रंग, font, आकार, जगह और layout। HTML बनावट बनाता है; CSS उसे रंगता है। एक CSS rule एक साथ सौ elements को style कर सकता है, इसलिए असली वेबसाइटें अपना CSS एक ही जगह रखती हैं, उसे दोहराने के बजाय।
Syntax — CSS जोड़ने के तीन तरीके
तीनों तरीके संक्षेप में यहाँ दिए गए हैं। Inline एक element के लिए सबसे तेज़ है। Internal एक पेज के लिए अच्छा है। External पूरी वेबसाइट के लिए professional चुनाव है।
याद रखने की तरकीब: inline = एक जगह, internal = एक पेज, external = पूरी साइट।
<!-- 1. Inline: tag के अंदर -->
<p style="color: red;">Red text.</p>
<!-- 2. Internal: head के अंदर -->
<style>p { color: red; }</style>
<!-- 3. External: अलग file -->
<link rel="stylesheet" href="style.css">
style.css बनाएँ, उसे <head> में link करें, और अपने सारे styles एक ही जगह रखें। एक line बदलने से पूरी साइट बदल जाएगी।आम गलतियाँ
- Stylesheet link करना भूल जाना — अगर कुछ भी style नहीं हुआ, तो पहले
<link>tag और file का नाम जाँचें। - CSS rules को HTML body के अंदर लिखना —
<style><head>में होता है। - कई elements पर दोहराई जाने वाली चीज़ के लिए inline style इस्तेमाल करना — classes इसी के लिए हैं।
- Class selector में dot भूल जाना — CSS में
.myclass, HTML मेंclass="myclass"।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1 { color: navy; }
.intro { color: green; font-size: 18px; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
<p class="intro">This paragraph uses a class.</p>
<p style="color: red;">This one uses inline CSS.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. CSS क्या है?
CSS का मतलब Cascading Style Sheets है। यह वह भाषा है जो पेज का लुक तय करती है: रंग, फ़ॉन्ट, स्पेसिंग और लेआउट।
2. CSS पेज में जोड़ने के तीन तरीके कौन से हैं?
इनलाइन CSS, जो style एट्रिब्यूट में लिखा जाता है; इंटरनल CSS, जो head में style एलिमेंट में होता है; और एक्सटर्नल CSS, जो अलग .css फ़ाइल में होती है और पेज से लिंक की जाती है।
3. असली वेबसाइटों के लिए एक्सटर्नल CSS सबसे अच्छी क्यों है?
एक ही फ़ाइल पूरी वेबसाइट को स्टाइल करती है। CSS फ़ाइल में एक लाइन बदलते ही सारी पेज एक साथ अपडेट हो जाते हैं।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (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
