आज के डिजिटल युग में अगर आप Web Designing या Web Development की दुनिया में कदम रखना चाहते हैं, तो HTML के बाद जो सबसे महत्वपूर्ण नाम सामने आता है, वह है CSS।
क्या आपने कभी सोचा है कि कोई Website इतनी रंगीन, व्यवस्थित और Professional कैसे दिखती है? इसका जवाब है Cascading Style Sheets (CSS)। बिना CSS के कोई भी Website सिर्फ काले-सफेद Text और बिना डिज़ाइन के Content जैसी दिखेगी।
इस Article में हम शुरुआत से लेकर Exam-Level तक CSS को बहुत ही सरल और आसान भाषा में समझेंगे, ताकि Beginners, ITI COPA और Web Design सीखने वाले सभी Students को एक ही जगह पूरी जानकारी मिल जाए।
Table of Contents
CSS क्या है? (What is CSS in Hindi)
CSS का पूरा नाम Cascading Style Sheets है। यह एक Style Sheet Language है, जिसका उपयोग HTML से बने Web Page को सुंदर, आकर्षक और व्यवस्थित बनाने के लिए किया जाता है।
जब हम HTML से Website बनाते हैं, तो उसमें केवल Content और उसका Structure तैयार होता है। लेकिन उस Content को रंग देना, Font बदलना, Spacing सेट करना, Layout बनाना और पूरे Page को Professional Look देना — यह सब काम CSS करता है।
HTML और CSS का रिश्ता
- HTML: यह किसी भी Website की हड्डियों या ढांचे (Structure) की तरह है। यह तय करता है कि Page पर कौन-सा Text या Image होगी।
- CSS: यह उस ढांचे के ऊपर कपड़े और मेकअप (Presentation) की तरह काम करता है। यह तय करता है कि Website दिखने में कैसी होगी।
Exam Tip: HTML को Structure Language और CSS को Style/Presentation Language कहा जाता है। यह अंतर अच्छी तरह याद रखें।
CSS का विकास क्रम (History and Development)
CSS के इतिहास को समझने के लिए नीचे दी गई Table को देखें, जिसमें इसके मुख्य Versions और उनके आने के वर्ष दिए गए हैं:
| वर्ष (Year) | CSS Version / पड़ाव | मुख्य बदलाव और विशेषताएं |
|---|---|---|
| 1994 | CSS का प्रस्ताव | Håkon Wium Lie ने पहली बार CSS का Concept पेश किया। |
| 1996 | CSS 1 | W3C द्वारा पहला आधिकारिक Version। इसमें Font और Color जैसे Basic Features आए। |
| 1998 | CSS 2 | इसमें Page Layout और Element की Positioning की सुविधा मिली। |
| 2011 | CSS 2.1 | यह CSS 2 का सुधरा हुआ रूप था, जिसे सभी Browsers के लिए Standard बनाया गया। |
| 2011 – अब तक | CSS 3 | यह सबसे आधुनिक Version है। इसमें 'Modules' System आया, जिससे Animation और Responsive Design आसान हुआ। |
| भविष्य | CSS 4 | यह कोई एक Update नहीं, बल्कि लगातार आ रहे नए Features (जैसे Selectors Level 4) का समूह है। |
Note: CSS का Proposal 1994 में आया था, लेकिन इसका पहला Official Version (CSS1) 1996 में W3C ने जारी किया था।
CSS क्यों जरूरी है? (Importance of CSS)
पहले के समय में Web Developers को हर HTML Tag के अंदर ही Style लिखना पड़ता था। इससे Code बहुत लंबा और जटिल हो जाता था। अगर किसी Website में 100 या उससे अधिक Pages होते थे, तो उनमें बदलाव करना बेहद कठिन और समय लेने वाला काम बन जाता था।
CSS के आने से इस समस्या का समाधान हो गया। इसकी मुख्य विशेषताएं निम्नलिखित हैं:
समय की बचत (Saves Time)
CSS की मदद से एक ही Style File बनाकर उसे पूरी Website (यहां तक कि हजारों Pages) पर लागू किया जा सकता है। इससे बार-बार Code लिखने की जरूरत नहीं पड़ती।
बेहतर Loading Speed (Fast Loading)
जब CSS को अलग File में रखा जाता है, तो Browser उसे एक बार Download करके Cache कर लेता है, जिससे Website तेजी से Load होती है।
Device Friendly (Responsive Design)
CSS के माध्यम से यह तय किया जा सकता है कि Website Mobile, Tablet और Computer जैसे अलग-अलग Devices पर कैसी दिखाई देगी।
Maintenance में आसानी (Easy Maintenance)
अगर Website का Design बदलना हो (जैसे Color, Font आदि), तो केवल CSS File में बदलाव करके पूरी Website को एक साथ Update किया जा सकता है।
CSS का Syntax कैसे काम करता है?
CSS एक Selector–Declaration Model पर आधारित है। इसका Syntax बहुत ही सरल है:
h1 {
color: blue;
font-size: 20px;
}इस Code के तीन मुख्य भाग होते हैं:
- Selector (h1): यह वह HTML Element होता है जिसे Style करना है। यहाँ
h1Tag को चुना गया है। - Property (color): यह वह विशेषता होती है जिसे बदलना है, जैसे रंग (color), साइज़ (font-size), Border आदि।
- Value (blue): यह Property को दिया गया मान होता है, जैसे blue रंग के लिए और 20px साइज़ के लिए।
Exam Point: Property और Value को मिलाकर एक Declaration कहा जाता है, जिसे हमेशा Curly Brackets { } के अंदर लिखा जाता है। हर Declaration के अंत में semicolon ( ; ) लगाना जरूरी होता है, वरना अगला Style काम नहीं करेगा।
HTML में CSS जोड़ने के तरीके (Types of CSS)
Web Development में CSS को मुख्य रूप से तीन तरीकों से इस्तेमाल किया जाता है।
(a) Inline CSS
जब CSS को सीधे HTML Tag के अंदर style Attribute की मदद से लिखा जाता है, उसे Inline CSS कहते हैं।
<p style="color:red;">यह एक लाल पैराग्राफ है।</p>(b) Internal CSS
जब CSS को HTML Page के <head> Section के अंदर <style> Tag में लिखा जाता है, तो उसे Internal CSS कहते हैं।
<head>
<style>
p {
color: blue;
}
</style>
</head>(c) External CSS
यह सबसे Professional और सबसे ज्यादा उपयोग किया जाने वाला तरीका है। इसमें CSS को एक अलग File (जैसे style.css) में लिखा जाता है और HTML File से Link किया जाता है।
<link rel="stylesheet" href="style.css">Exam Point: Priority के हिसाब से Inline CSS सबसे ज्यादा प्रभावी (Highest Priority) होता है, उसके बाद Internal और फिर External CSS आता है — बशर्ते किसी में !important का उपयोग न किया गया हो।
CSS Selectors: Elements को चुनने का तरीका
किसी Element को Target करने के लिए अलग-अलग Selectors का इस्तेमाल होता है। नीचे दी गई Table से मुख्य Selectors को समझें:
| Selector का नाम | उदाहरण | काम क्या करता है? |
|---|---|---|
| Element Selector | p { } |
सभी <p> Tags को Style करता है। |
| ID Selector | #id-name { } |
किसी एक विशेष ID वाले Element को Style करता है। |
| Class Selector | .class-name { } |
एक ही Class वाले कई Elements को Style करता है। |
| Universal Selector | * { } |
पूरे Page के सभी Elements पर लागू होता है। |
| Group Selector | h1, h2, p { } |
एक साथ कई Tags को समान Style देने के लिए। |
Note: ID Selector को # (Hash) से और Class Selector को . (Dot) से पहचाना जाता है। एक Page पर एक ID सिर्फ एक बार उपयोग होनी चाहिए, जबकि Class को कई Elements पर बार-बार उपयोग किया जा सकता है।
CSS की मुख्य Properties (Common CSS Properties)
एक Beginner के तौर पर आपको इन Properties की जानकारी जरूर होनी चाहिए:
- Colors:
color(Text का रंग),background-color(पीछे का रंग)। - Text:
text-align(Center या Left),text-decoration(Underline हटाना)। - Fonts:
font-family(लिखावट का Style),font-size(अक्षर का आकार)। - Box Model:
margin(बाहरी गैप),padding(भीतरी गैप),border(किनारा)।
CSS Box Model: सबसे जरूरी Concept
अगर आप CSS में माहिर बनना चाहते हैं, तो Box Model को समझना सबसे जरूरी है। CSS हर Element को एक चौकोर डिब्बे (Box) की तरह देखता है, जिसके चार हिस्से होते हैं।
- Content: जहाँ आपका Text या Image रहती है।
- Padding: Content और Border के बीच की खाली जगह।
- Border: Padding के चारों ओर की Line।
- Margin: Border के बाहर की खाली जगह जो दूसरे Elements से दूरी बनाती है।
Exam Point: Box Model का क्रम हमेशा अंदर से बाहर की ओर याद रखें — Content → Padding → Border → Margin।
परीक्षा के लिए महत्वपूर्ण बिंदु (Exam Important Points)
- CSS का पूरा नाम Cascading Style Sheets है।
- CSS का Proposal Håkon Wium Lie ने 1994 में दिया था।
- CSS का पहला Official Version CSS1, 1996 में W3C द्वारा जारी हुआ था।
- CSS जोड़ने के तीन तरीके हैं — Inline, Internal और External CSS।
- Priority Order: Inline > Internal > External (बिना !important के)।
- हर CSS Declaration { } के अंदर लिखी जाती है और ; से समाप्त होती है।
- ID Selector को # और Class Selector को . से दर्शाया जाता है।
- CSS Box Model के चार भाग हैं — Content, Padding, Border, Margin।
- External CSS सबसे Professional और सबसे ज्यादा उपयोग होने वाला तरीका है।
- CSS3 में Animation, Transitions, Flexbox और Grid जैसे Advanced Features जोड़े गए।
📌 Web Design के बारे में यहाँ पढ़ें:
▸ HTML का परिचय | Introduction to HTML▸ HTML Basic Page Structure | बेसिक पेज स्ट्रक्चर
▸ HTML Tags का वर्गीकरण | HTML Tags Classification
▸ HTML Attributes क्या हैं? | HTML Attributes in Hindi