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?
बिना CSS | CSS के साथ |
---|---|
केवल 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
- एक HTML पेज बनाइए जिसमें:
- एक heading
<h1>
को red color में center-align करें (internal CSS से) - एक paragraph का background light gray हो (inline CSS से)
- एक external CSS फाइल से एक button को blue background और white text दें
- एक heading
🧠 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 होती है।