CSS Introduction
अगर आप वेबसाइट बनाना सीख रहे हैं तो आपने HTML के बारे में तो सुना ही होगा — HTML हमारे वेब पेज की बॉडी है। लेकिन क्या आपने गौर किया है कि HTML से बनी वेबसाइट काली-सफेद और बोरिंग लगती है? यही जगह पर CSS (Cascading Style Sheets) काम में आता है। CSS आपकी वेबसाइट को स्टाइलिश, कलरफुल, और प्रोफेशनल लुक देता है। मतलब HTML structure बनाता है, और CSS उस structure को design करता है। जैसे शरीर को कपड़े और स्टाइल से सजाया जाता है, वैसे ही HTML पेज को CSS से सजाया जाता है।
CSS का Full Form
Cascading Style Sheets
- Cascading का मतलब होता है “एक के ऊपर एक layer में apply होना।” यानी अगर एक ही element पर multiple CSS rules लागू हैं, तो कौन सा rule चलेगा — यह cascading order तय करता है।
- Style Sheets मतलब “styling के लिए instructions का सेट।”
CSS क्या कर सकता है?
CSS से आप अपने वेबपेज की लगभग हर चीज़ को बदल सकते हैं —
- Text का color, font, size, spacing
- पेज का background color या background image
- Elements के बीच की margin और padding
- Boxes की borders, shadows, और rounded corners
- Layout को responsive बनाना ताकि मोबाइल, टैबलेट और लैपटॉप पर सही दिखे
- और बहुत कुछ…
Simple words में — CSS आपकी वेबसाइट को सुंदर बनाता है और उसे मोबाइल फ्रेंडली भी करता है।
HTML + CSS Example
चलो एक छोटा उदाहरण देखें जिससे समझ आए कि CSS असल में क्या करता है
HTML कोड (बिना CSS)
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>This is my first webpage!</p>
</body>
</html>अब वही कोड CSS के साथ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: 'Segoe UI', sans-serif;
}
h1 {
color: #0088cc;
text-align: center;
}
p {
color: #333;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage!</p>
</body>
</html>देखिए फर्क — अब पेज कलरफुल, readable और बेहतर दिखता है।
CSS कैसे काम करता है?
CSS को HTML में तीन तरीकों से जोड़ा जा सकता है:
- Inline CSS – HTML tag के अंदर style attribute में लिखा जाता है।
- Internal CSS – <style> टैग के अंदर लिखा जाता है (HTML के <head> में)।
- External CSS – एक अलग .css फाइल बनाई जाती है और HTML में <link> से जोड़ी जाती है।
- हम इन तीनों तरीकों को आगे के lesson "CSS How To" में विस्तार से सीखेंगे।
CSS का फायदा क्या है?
| फायदा | समझ |
|---|---|
| **Attractive Design** | आपकी साइट को **professional look** देता है। |
| **Easy Maintenance** | एक ही **CSS फाइल** से पूरे site का **design बदला** जा सकता है। |
| **Responsive Layout** | अलग-अलग **screen size** पर site **perfect दिखती है**। |
| **Fast Loading** | HTML में **कम कोड** और **साफ structure** होने से साइट **तेज चलती है**। |
| **Reusability** | एक बार लिखा **CSS**, कई **pages में use** हो सकता है। |
Example से समझो – बिना CSS vs CSS के साथ
| बिना CSS | CSS के साथ |
|---|---|
| ब्लैक एंड व्हाइट साइट | कलरफुल और स्टाइलिश साइट |
| हर एलिमेंट का default look | Custom fonts, shadows, animations |
| Mobile पर फैल जाती है | Responsive layout हर device पर सही |
| Editing मुश्किल | सिर्फ CSS फाइल बदलनी होती है |
CSS की Basic Syntax
CSS का structure simple होता है —
selector {
property: value;
}- selector → किस element को style देना है
- property → क्या बदलना है (जैसे color, font-size, background-color)
- value → कितना बदलना है (जैसे red, 16px, #000)
Example:
p {
color: blue;
font-size: 18px;
}इसका मतलब: सारे <p> (paragraph) टैग का टेक्स्ट नीला और 18px का होगा।
Short Recap
| पॉइंट (Point) | सारांश (Summary) |
|---|---|
| CSS का मतलब | Cascading Style Sheets |
| काम क्या करता है | HTML elements को design और layout देता है |
| HTML से फर्क | HTML **structure** देता है, CSS **design** देता है |
| जोड़ने के तरीके | Inline, Internal, External |
| फायदा | Responsive, Reusable, Fast, Clean Code |
Final Thoughts
- CSS सीखना हर web developer के लिए पहला real design step है।
- यह न सिर्फ आपकी वेबसाइट को सुंदर बनाता है, बल्कि आपको एक professional web designer बनने की राह पर ले जाता है।
- तो अब तैयार हो जाइए अगले लेसन के लिए —
- “CSS Syntax”, जहाँ हम सीखेंगे कि CSS कोड लिखने का सही तरीका क्या है और उसे समझने का आसान तरीका।