सीएसएस (CSS - Cascading Style Sheets) का पूर्ण रूप कैस्केडिंग स्टाइल शीट्स है। यह एक स्टाइलिंग भाषा है जिसका उपयोग एचटीएमएल द्वारा बनाए गए वेब पेज को सुंदर, आकर्षक और व्यवस्थित रूप प्रदान करने के लिए किया जाता है। यदि एचटीएमएल वेब पेज का कंकाल है, तो सीएसएस उसकी सुंदरता और रंगरूप है। सीएसएस के द्वारा हम फॉन्ट, रंग, पृष्ठभूमि, मार्जिन, पैडिंग, बॉर्डर, लेआउट आदि को नियंत्रित कर सकते हैं। सीएसएस का सबसे बड़ा लाभ यह है कि एक ही स्टाइल शीट को अनेक वेब पेजों पर लागू किया जा सकता है, जिससे समय की बचत होती है और वेबसाइट का रूप एक समान रहता है। किसी भी वेब डेवलपर के लिए सीएसएस का ज्ञान अनिवार्य है। इस अध्याय में हम सीएसएस के प्रकार, चयनकर्ता (Selectors), प्रमुख गुण (Properties) और विशेषताओं का अध्ययन करेंगे।
सीएसएस एक स्टाइल शीट भाषा है जो वेब पेज के तत्वों पर स्टाइल लागू करती है। एचटीएमएल सामग्री की संरचना बनाता है और सीएसएस उस सामग्री को प्रस्तुत करने का तरीका निर्धारित करता है। सीएसएस की आवश्यकता निम्न कारणों से है:
सीएसएस को तीन प्रकार से वेब पेज में जोड़ा जा सकता है:
इसमें स्टाइल सीधे किसी एचटीएमएल तत्व के style विशेषता में लिखी जाती है।
<p style="color: red; font-size: 20px;">यह लाल रंग का टेक्स्ट है</p>
यह केवल उस एक तत्व पर लागू होती है।
इसमें स्टाइल वेब पेज के <head> भाग में <style> टैग के अंदर लिखी जाती है।
<head>
<style>
p { color: blue; }
</style>
</head>
यह पूरे उसी वेब पेज पर लागू होती है।
इसमें स्टाइल एक अलग .css फाइल में लिखी जाती है और <link> टैग द्वारा वेब पेज से जोड़ी जाती है।
<head>
<link rel="stylesheet" href="style.css">
</head>
यह सबसे उत्तम विधि है क्योंकि इसे कई पेजों पर लागू किया जा सकता है।
सीएसएस का प्रत्येक नियम दो भागों से बना होता है - चयनकर्ता (Selector) और घोषणा ब्लॉक (Declaration Block):
चयनकर्ता {
गुण: मान;
}
उदाहरण:
h1 {
color: green;
text-align: center;
}
यहाँ h1 चयनकर्ता है, color गुण (Property) है, green मान (Value) है। गुण-मान के जोड़े को घोषणा (Declaration) कहते हैं, जो {} के अंदर रहती है। अनेक घोषणाएँ होने पर उन्हें अर्धविराम (;) से अलग किया जाता है।
चयनकर्ता उन तत्वों की पहचान करता है जिन पर स्टाइल लागू करनी है। प्रमुख चयनकर्ता:
p, h1, body।# चिह्न से शुरू, जैसे #header। यह किसी एक ही तत्व को चुनता है (अनोखा होता है)।. चिह्न से शुरू, जैसे .menu। यह कई तत्वों को एक साथ चुन सकता है।* चिह्न से, यह पेज के सभी तत्वों का चयन करता है।h1, h2, p।उदाहरण:
p { color: red; } /* तत्व चयनकर्ता */
#header { background: blue; } /* आईडी चयनकर्ता */
.menu { font-size: 18px; } /* क्लास चयनकर्ता */
* { margin: 0; } /* सार्वभौमिक */
h1, h2 { font-weight: bold; } /* समूह */
color: टेक्स्ट का रंग।background-color: पृष्ठभूमि का रंग।font-family: फॉन्ट का प्रकार, जैसे Arial, sans-serif।font-size: फॉन्ट का आकार, जैसे 20px।font-weight: फॉन्ट की मोटाई (bold, normal)।text-align: टेक्स्ट की स्थिति (left, center, right, justify)।text-decoration: सजावट (underline, none)।text-transform: टेक्स्ट का रूपांतरण (uppercase, lowercase, capitalize)।
बॉक्स मॉडल गुण:
width और height: तत्व की चौड़ाई और ऊँचाई।margin: तत्व के बाहर की दूरी (चारों ओर खाली स्थान)।padding: तत्व की सामग्री और बॉर्डर के बीच की दूरी।border: तत्व के चारों ओर रेखा (जैसे border: 2px solid red)।border-radius: बॉर्डर के कोनों को गोल करना।
लेआउट गुण:
display: तत्व का प्रदर्शन (block, inline, none)।position: तत्व की स्थिति (static, relative, absolute, fixed)।float: तत्व को बाएँ या दाएँ स्थानांतरित करना।z-index: तत्वों का स्टैकिंग क्रम।प्रत्येक एचटीएमएल तत्व एक बॉक्स के रूप में माना जाता है। इस बॉक्स में चार परतें होती हैं:
इस क्रम में मार्जिन सबसे बाहर और कंटेंट सबसे अंदर होता है। बॉक्स मॉडल को समझना लेआउट डिज़ाइन के लिए अत्यंत आवश्यक है।
सीएसएस में रंग को निम्नलिखित तरीकों से निर्धारित किया जा सकता है:
#RRGGBB रूप में, जैसे #FF0000 लाल है, #00FF00 हरा, #0000FF नीला।rgb(255, 0, 0) लाल दर्शाता है। प्रत्येक रंग 0 से 255 तक होता है।hsl(0, 100%, 50%) रंग को hue, saturation, lightness में दर्शाता है।rgba(255, 0, 0, 0.5) में अंतिम मान 0 से 1 तक पारदर्शिता (Opacity) दर्शाता है।कैस्केडिंग का अर्थ है कि जब एक ही तत्व पर अनेक स्टाइल नियम लागू होते हैं, तो एक निश्चित क्रम में अंतिम रूप से कौन सी स्टाइल लागू होगी। प्राथमिकता का क्रम (उच्च से निम्न):
#id).class)p, h1)यदि प्राथमिकता समान हो, तो जो नियम अंत में लिखा होता है, वही लागू होता है। महत्वपूर्ण नियम को !important से और अधिक प्राथमिकता दी जा सकती है।
a:hover: लिंक पर माउस ले जाने पर स्टाइल।a:visited: देखे गए लिंक की स्टाइल।a:active: लिंक दबाए जाने के समय की स्टाइल।a:link: बिना देखे लिंक की स्टाइल।:first-child: किसी तत्व के पहले बच्चे को चुनना।::before और ::after: तत्व से पहले या बाद में सामग्री जोड़ना।| प्रकार | कहाँ लिखी जाती है | स्कोप | लाभ |
|---|---|---|---|
| इनलाइन | तत्व के style विशेषता में | एक तत्व | तेज़ बदलाव |
| आंतरिक | head में style टैग में | एक पेज | एक पेज की स्टाइल |
| बाहरी | अलग .css फाइल में | पूरी वेबसाइट | सर्वोत्तम, पुनः उपयोग योग्य |
| चयनकर्ता | चिह्न/रूप | उदाहरण |
|---|---|---|
| तत्व | टैग नाम | p { } |
| आईडी | # | #header { } |
| क्लास | . | .menu { } |
| सार्वभौमिक | * | * { } |
| समूह | , | h1, h2 { } |
| परत | स्थान | कार्य |
|---|---|---|
| कंटेंट | सबसे अंदर | वास्तविक सामग्री |
| पैडिंग | कंटेंट के चारों ओर | सामग्री और बॉर्डर के बीच स्थान |
| बॉर्डर | पैडिंग के बाहर | रेखा/सीमा |
| मार्जिन | सबसे बाहर | तत्व के बाहर का स्थान |
#) और क्लास चयनकर्ता (.) के चिह्नों में भ्रम।#RRGGBB में गलत क्रम लिखना, जैसे #00FF00 (हरा) को नीला समझ लेना।<link> टैग की जगह सीधे लिखना या rel विशेषता भूलना।text-align और float की भूमिकाओं में भ्रम; text-align टेक्स्ट को संरेखित करता है जबकि float तत्व को बाएँ/दाएँ ले जाता है।सीएसएस वेब डिज़ाइन की आत्मा है। इस अध्याय में हमने सीएसएस के प्रकार, सिंटैक्स, चयनकर्ता, प्रमुख गुण, बॉक्स मॉडल, रंग निर्धारण और कैस्केडिंग के नियमों का अध्ययन किया। एचटीएमएल के साथ सीएसएस का संयोजन ही एक सुंदर वेब पेज बनाता है। बॉक्स मॉडल को समझना लेआउट डिज़ाइन का आधार है, और कैस्केडिंग का नियम स्टाइल की प्राथमिकता तय करता है। सीएसएस का अभ्यास करके हम अपने वेब पेजों को अद्वितीय और आकर्षक बना सकते हैं। आगे के अध्यायों में हम जावास्क्रिप्ट सीखेंगे जो वेब पेज को इंटरैक्टिव बनाएगा। याद रखिए, सीएसएस की कला में निपुणता अभ्यास से ही आती है।