HTML CSS

CSS का पूरा नाम है — Cascading Style Sheets यानि कि यह HTML elements को “सजाने और डिजाइन करने” का तरीका है। HTML से हम structure (ढांचा) बनाते हैं, और CSS से हम उसे style (रूप-सजावट) देते हैं।

उदाहरण के तौर पर:

<p style="color: blue; font-size: 20px;">यह एक styled paragraph है।</p>

यहाँ color और font-size दोनों CSS properties हैं। Output :

यह एक styled paragraph है।

CSS क्यों ज़रूरी है?

HTML केवल content दिखाता है। लेकिन वेबसाइट को सुंदर, आकर्षक और उपयोगी बनाने का काम CSS करती है। CSS से आप कर सकते हैं:

Text और Background का रंग बदलना
Font और Size सेट करना
Borders, Padding, Margin लगाना
Layout बनाना (columns, grids आदि)
Animation और Hover Effects जोड़ना

HTML में CSS जोड़ने के 3 तरीके

HTML के अंदर CSS लगाने के तीन मुख्य तरीके होते हैं:

तरीका	नाम	कहाँ लिखा जाता है
1️⃣	Inline CSS	किसी एक टैग के अंदर
2️⃣	Internal CSS	<style>टैग के अंदर (HTML head में)
3️⃣	External CSS	अलग .css फाइल में

1. Inline CSS Example

Inline CSS सीधे HTML टैग में style attribute के अंदर लिखी जाती है।

<h2 style="color: red; text-align: center;">Welcome to My Website</h2>
<p style="color: green; font-size: 18px;">यह inline CSS का example है।</p>

फायदे: छोटे बदलावों के लिए अच्छा नुकसान: बड़ी वेबसाइट में बार-बार लिखना मुश्किल

2. Internal CSS Example

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

<h1>Internal CSS Example</h1>
<p>यह Example Internal CSS के साथ बनाया गया है।</p>

</body>
</html>

फायदे: पूरे पेज पर एक समान स्टाइल लगती है 📌 नुकसान: अगर वेबसाइट में बहुत सारे पेज हैं, तो हर पेज पर CSS लिखनी पड़ेगी

3. External CSS Example

यह सबसे बेहतर और प्रोफेशनल तरीका है। इसमें CSS को एक अलग फाइल में रखते हैं और HTML से उसे link करते हैं।

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

<h1>External CSS Example</h1>
<p>यह Example External CSS के साथ बनाया गया है।</p>

</body>
</html>

और CSS फाइल (style.css) में लिखेंगे:

body {
  background-color: #fff8dc;
  color: #333;
  font-family: Verdana;
}

h1 {
  color: darkred;
  text-align: center;
}

p {
  font-size: 18px;
}

फायदे: कोड साफ और Reusable होता है एक फाइल से पूरी वेबसाइट की स्टाइल कंट्रोल होती है

Example: रंगीन और स्टाइलिश कार्ड डिजाइन

<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    width: 300px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #fff;
    text-align: center;
    margin: 20px auto;
  }
  .card h2 {
    color: #0066cc;
  }
  .card p {
    color: #555;
  }
</style>
</head>
<body>

<div class="card">
  <h2>My Stylish Card</h2>
  <p>यह एक सुंदर कार्ड का Example है जो CSS से बना है।</p>
</div>

</body>
</html>

Output: सफेद बैकग्राउंड वाला एक सुंदर shadow box card।

Common CSS Properties (जो सबसे ज़्यादा इस्तेमाल होती हैं)

Property (प्रॉपर्टी)	Example (उदाहरण)	काम (Function)
color	`color: red;`	टेक्स्ट का रंग
background-color	`background-color: yellow;`	बैकग्राउंड रंग
font-size	`font-size: 20px;`	टेक्स्ट साइज
font-family	`font-family: Arial;`	फॉन्ट स्टाइल
text-align	`text-align: center;`	टेक्स्ट अलाइनमेंट
margin	`margin: 20px;`	बाहर की दूरी
padding	`padding: 10px;`	अंदर की दूरी
border	`border: 2px solid black;`	बॉर्डर सेट करना
width / height	`width: 300px;`	साइज सेट करना

Bonus Tip: CSS Comments

CSS में Comment डालने के लिए इस सिंटैक्स का प्रयोग करते हैं:

/* यह एक CSS Comment है */

Responsive Design (थोड़ा आगे की बात)

CSS के जरिए आप अपने वेब पेज को मोबाइल, टैबलेट और लैपटॉप पर Responsive बना सकते हैं — मतलब हर स्क्रीन पर अच्छा दिखे।

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}