CSS How To

CSS को HTML में जोड़ने के तीन मुख्य तरीके (methods) होते हैं —

तरीका (Method)	नाम (Name)	कहाँ लिखा जाता है (Where it's written)
1️⃣	Inline CSS	HTML element के अंदर
2️⃣	Internal CSS	HTML के<head>टैग के अंदर
3️⃣	External CSS	अलग .css फाइल में

अब हम तीनों को detail में example के साथ समझते हैं

Inline CSS

Inline CSS का मतलब है — style को सीधे HTML tag के अंदर लिखना। यह सबसे simple तरीका है, लेकिन बड़ी वेबसाइटों के लिए recommended नहीं होता।

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="color: blue; text-align: center;">Hello World</h1>
<p style="color: green; font-size: 20px;">यह Inline CSS का Example है।</p>

</body>
</html>

Explanation:

यहाँ हर element के अंदर style="..." attribute में CSS लिखी गई है।
जो CSS आप यहाँ लिखते हैं, वो सिर्फ उसी element पर लागू होती है।

Drawback:

Code लंबा और messy हो जाता है।
Same style बार-बार लिखनी पड़ती है।
Maintenance मुश्किल हो जाता है।

Inline CSS सिर्फ Quick Testing या Single Element Styling के लिए ठीक है।

Internal CSS

Internal CSS HTML के <head> सेक्शन में <style> टैग के अंदर लिखी जाती है। यह तरीका छोटे webpages या single-page projects के लिए perfect है।

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: red;
    text-align: center;
  }
  p {
    color: #333;
    font-size: 18px;
  }
</style>
</head>
<body>

<h1>Welcome to CSS Tutorial</h1>
<p>यह Internal CSS का Example है।</p>

</body>
</html>

Explanation:

<style> टैग HTML के <head> में होता है।
यह तरीका HTML और CSS दोनों को एक ही फाइल में रखता है।
Internal CSS पूरे पेज पर लागू होती है।

Internal CSS तब बढ़िया है जब आपके पास सिर्फ एक या दो पेज हों।

External CSS

यह सबसे professional और powerful तरीका है। इसमें CSS एक अलग .css फाइल में लिखी जाती है और HTML में <link> टैग से जोड़ी जाती है।

Example:

step 1: CSS file बनाए (style.css)

body {
  background-color: #fafafa;
  font-family: Arial, sans-serif;
}

h1 {
  color: #0077cc;
  text-align: center;
}

p {
  color: #333;
  text-align: center;
  font-size: 18px;
}

step 2: HTML file बनाए (index.html)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>External CSS Example</h1>
<p>यह Example दिखाता है कि CSS को अलग फाइल से कैसे जोड़ा जाता है।</p>

</body>
</html>

Explanation:

<link> टैग से हम HTML और CSS को कनेक्ट करते हैं।
href="style.css" उस CSS फाइल का path बताता है।
इससे styling अलग रहती है और HTML साफ (clean) रहता है।

External CSS का फायदा यह है कि एक ही CSS फाइल से सैकड़ों pages design किए जा सकते हैं।

Comparison – तीनों तरीकों का फर्क

तरीका	कहाँ लिखा जाता है	Scope	Best For
Inline CSS	HTML element के अंदर	सिर्फ उस element के लिए	Quick Testing
Internal CSS	`<style>` टैग में	एक ही पेज के लिए	Single Page Site
External CSS	अलग `.css` फाइल में	पूरे वेबसाइट के लिए	Large Websites

Multiple CSS कैसे चलती है (Cascading Rule)

कभी-कभी एक ही element पर कई जगह से CSS लग सकती है — Inline, Internal, External तीनों में से। तो फिर कौन सी CSS apply होगी? यह decide होता है Cascading Order से:

प्राथमिकता (Priority)	CSS प्रकार (CSS Type)
Highest (सबसे अधिक)	Inline CSS
Medium (मध्यम)	Internal CSS
Lowest (सबसे कम)	External CSS

Example:

<h1 style="color:red;">Hello World</h1>

अगर External CSS में color blue लिखा है और Internal में green — फिर भी यहाँ text लाल (red) रहेगा क्योंकि Inline CSS की priority सबसे ज़्यादा होती है।

Pro Tip

हमेशा बड़े projects में External CSS का use करें।
Testing या छोटा design check करने के लिए Internal CSS ठीक है।
सिर्फ emergency या single element के लिए Inline CSS।
Maintenance और reusability के लिए CSS को अलग फाइल में रखना सबसे अच्छा तरीका है।

Real-Life Analogy (थोड़ा मज़ेदार अंदाज़ में)

उदाहरण (Situation)	CSS का प्रकार (Type)
जैसे आप किसी कपड़े पर हाथ से एक छोटा patch लगाते हैं	Inline CSS
जैसे एक ही कपड़े को उसी कमरे में बार-बार design करते हैं	Internal/Embedded CSS
जैसे आप एक अलग tailoring room बनाकर सब design वहीं से करवाते हैं	External CSS

Practice Exercise

एक HTML पेज बनाइए और तीनों तरीकों से “Hello World” का रंग बदलिए।
External CSS में background-color सेट कीजिए और Internal CSS से heading को center कीजिए।
Inline CSS से paragraph का font-size बढ़ाइए।

Final Thoughts

CSS को HTML में जोड़ने के तीन तरीके समझ लेना आपकी web designing की पहली मजबूत सीढ़ी है। अब आप confidently किसी भी page में CSS apply कर सकते हैं। अब अगले लेसन में चलेंगे — “CSS Comments” जहाँ आप सीखेंगे कि CSS में notes या explanations कैसे लिखे जाते हैं ताकि code समझना आसान हो जाए।

उदाहरण (Situation)	CSS का प्रकार (Type)
जैसे आप किसी कपड़े पर हाथ से एक छोटा patch लगाते हैं	Inline CSS
जैसे एक ही कपड़े को उसी कमरे में बार-बार design करते हैं	Internal/Embedded CSS
जैसे आप एक अलग tailoring room बनाकर सब design वहीं से करवाते हैं	External CSS