HTML Tutorial

HTML CSS – Introduction & Basic Usage

इस चैप्टर में हम सीखेंगे कि HTML में CSS (Cascading Style Sheets) क्या होता है, इसका उपयोग क्यों और कैसे किया जाता है, और CSS को HTML में जोड़ने के कौन-कौन से तरीके होते हैं।


🔹 CSS क्या है?

CSS (Cascading Style Sheets) का उपयोग HTML elements की styling के लिए किया जाता है, जैसे कि:

  • टेक्स्ट का रंग (color)
  • बैकग्राउंड
  • बॉर्डर
  • मार्जिन और पैडिंग
  • फॉन्ट स्टाइल
  • और बहुत कुछ…

👉 CSS से आप एक ही बार में कई पेजों की डिजाइन को कंट्रोल कर सकते हैं।


🧠 Why Use CSS?

बिना CSSCSS के साथ
केवल structureआकर्षक layout & styling
सारा styling inline ही करना पड़ता हैसाफ-सुथरा और reusable
बार-बार code दोहरानाएक बार लिखो, कई जगह इस्तेमाल करो

🔸 CSS जोड़ने के 3 तरीके

Methodकहाँ उपयोग होता हैScope
1. Inline CSSसीधे HTML tag मेंकेवल उसी element पर
2. Internal CSS<style> टैग के अंदरपूरे HTML पेज पर
3. External CSS.css फाइल के रूप मेंकई पेजों पर लागू होता है

🔹 1. Inline CSS

CSS को सीधे HTML tag के style attribute में लिखा जाता है।

✅ Example:

<p style="color: red; font-size: 20px;">यह Inline CSS है</p>

📌 यह तरीका छोटा होता है लेकिन बड़ी websites में maintain करना कठिन होता है।


🔹 2. Internal CSS

CSS को HTML पेज के <head> सेक्शन में <style> टैग के अंदर लिखा जाता है।

✅ Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-family: Arial;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a paragraph using internal CSS.</p>
</body>
</html>

🔹 3. External CSS

CSS को अलग .css फाइल में रखा जाता है और उसे HTML पेज से link किया जाता है।

✅ Example:

style.css

body {
  background-color: #f2f2f2;
}

h2 {
  color: green;
  text-align: left;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>This is styled with external CSS</h2>
</body>
</html>

📌 यह सबसे अच्छा तरीका है, खासकर बड़े प्रोजेक्ट्स के लिए।


🔸 CSS Syntax

selector {
  property: value;
}

✅ Example:

p {
  color: purple;
  font-size: 16px;
}

इसका मतलब: सभी <p> टैग में text का रंग पर्पल और font-size 16px होगा।


🧪 Practice Task

  1. एक HTML पेज बनाइए जिसमें:
    • एक heading <h1> को red color में center-align करें (internal CSS से)
    • एक paragraph का background light gray हो (inline CSS से)
    • एक external CSS फाइल से एक button को blue background और white text दें

🧠 Useful Selectors

Selectorकाम
*सभी elements
pसभी <p> टैग
#idकिसी specific id वाले element
.classकिसी class वाले सभी elements

🔚 Conclusion:

  • CSS आपको HTML को visually सुंदर और professionally structured बनाने में मदद करता है।
  • शुरुआती तौर पर Internal CSS सीखना आसान है।
  • बड़े projects में हमेशा External CSS preferred होती है।