CSS – कैस्केडिंग स्टाइल शीट्स (Cascading Style Sheets) एक स्टाइल भाषा है जिसका उपयोग वेब पेजों को डिजाइन करने के लिए किया जाता है। यह आपको पृष्ठ सामग्री को उसकी प्रस्तुति से अलग करने की अनुमति देता है, जिससे लेआउट और डिज़ाइन के साथ काम करना आसान हो जाता है।
सीएसएस में नियमों का एक सेट होता है, जिनमें से प्रत्येक यह निर्धारित करता है कि वेब पेज पर एक निश्चित तत्व को कैसे स्टाइल किया जाना चाहिए। नियमों में चयनकर्ताओं का उपयोग करके तत्वों का चयन करना और उन तत्वों पर गुण सेट करना शामिल है। आइए सीएसएस के मुख्य घटकों पर नजर डालें – नियम, चयनकर्ता और गुण।
नियम
CSS नियम में एक चयनकर्ता और एक प्रॉपर्टी ब्लॉक होता है। नियम ब्राउज़र को बताता है कि वेब पेज के किन तत्वों को स्टाइल करना है और उन्हें कैसे स्टाइल करना है। प्रत्येक नियम एक चयनकर्ता से शुरू होता है जो तत्वों का चयन करता है और गुणों के एक ब्लॉक के साथ समाप्त होता है जो चयनित तत्वों पर लागू होता है।
यहां एक सरल नियम का उदाहरण दिया गया है:
p{
color: blue;
font-size: 16px;
}
यहां `p` एक चयनकर्ता है जो पृष्ठ पर सभी अनुच्छेदों का चयन करता है। प्रॉपर्टी ब्लॉक के अंदर, पैराग्राफ के लिए शैलियाँ सेट की गई हैं: नीला टेक्स्ट रंग और फ़ॉन्ट आकार 16 पिक्सेल।
चयनकर्ता
चयनकर्ता आपको कुछ शैलियों को लागू करने के लिए वेब पेज पर एक या अधिक तत्वों का चयन करने की अनुमति देते हैं। चयनकर्ता बहुत सरल या अधिक जटिल हो सकते हैं और आपको उनके प्रकार, वर्ग, आईडी, विशेषताओं और यहां तक कि पृष्ठ पर उनके स्थान के आधार पर तत्वों का चयन करने की अनुमति देते हैं।
सरल चयनकर्ताओं के उदाहरण:
- `p` – सभी अनुच्छेदों का चयन करता है।
- `.header` – वर्ग “हेडर” वाले सभी तत्वों का चयन करता है।
- `#logo` – आईडी “लोगो” वाले तत्व का चयन करता है।
अधिक जटिल चयनकर्ताओं के उदाहरण:
- `ul li` – `li` सूची के सभी तत्वों का चयन करता है जो `ul` तत्व के बच्चे हैं।
- `input` – पृष्ठ पर सभी टेक्स्ट फ़ील्ड का चयन करता है।
गुण
गुण चयनकर्ताओं का उपयोग करके चयनित तत्वों की उपस्थिति निर्धारित करते हैं। प्रत्येक गुण का एक मान होता है जो निर्दिष्ट करता है कि तत्व कैसा दिखना चाहिए।
संपत्ति के उदाहरण:
- `color` – तत्व के टेक्स्ट रंग को परिभाषित करता है।
- `font-size` – फ़ॉन्ट आकार सेट करता है।
- `background-color` – तत्व का पृष्ठभूमि रंग सेट करता है।
- `बॉर्डर` – तत्व की सीमा की शैली, मोटाई और रंग को परिभाषित करता है।
यहां गुणों का उपयोग करने का एक उदाहरण दिया गया है:
h1 {
color: red;
font-size: 24px;
background-color: yellow;
border: 1px solid black;
}
यह नियम सभी h1 शीर्षकों का चयन करता है और उनके टेक्स्ट का रंग लाल, फ़ॉन्ट आकार 24px, पीला बैकग्राउंड और काला बॉर्डर 1px मोटा सेट करता है।
कॉम्बिनेटर
सीएसएस में कॉम्बिनेटर आपको चयनकर्ताओं को संयोजित करने और अधिक विशिष्ट नियम बनाने की अनुमति देते हैं। यहां कॉम्बिनेटरों के कुछ उदाहरण दिए गए हैं:
- `div p` – सभी `p` तत्वों का चयन करता है जो `div` तत्वों के बच्चे हैं।
- `.menu-item > a` – उन सभी `a` तत्वों का चयन करता है जो वर्ग `.menu-item` वाले तत्वों के प्रत्यक्ष वंशज हैं।
- `h2 + p` – सभी `p` तत्वों का चयन करता है जो सीधे `h2` तत्वों के बाद आते हैं।
कॉम्बिनेटर का उपयोग करने से आप यह तय कर सकते हैं कि किसी पृष्ठ पर तत्वों पर शैलियाँ कैसे लागू की जाती हैं।
छद्म वर्ग और छद्म तत्व
छद्म वर्ग और छद्म तत्व आपको उन तत्वों का चयन करने की अनुमति देते हैं जो कुछ निश्चित अवस्था में हैं या जिनके विशिष्ट भाग हैं। वे मुख्य चयनकर्ता के बाद निर्दिष्ट होते हैं और एक कोलन द्वारा दर्शाए जाते हैं।
छद्म वर्ग के उदाहरण:
- `:hover` – जब कर्सर किसी तत्व पर घूमता है तो शैलियाँ लागू होती हैं।
- `:active` – तत्व सक्रिय होने पर शैलियाँ लागू होती हैं (उदाहरण के लिए, बटन पर क्लिक करके)।
- `:focus` – जब तत्व पर फोकस होता है तो शैलियाँ लागू होती हैं (उदाहरण के लिए, क्लिक करने पर एक इनपुट फ़ील्ड)।
छद्म तत्वों के उदाहरण:
- `::before` – चयनित तत्व की सामग्री से पहले सामग्री जोड़ता है।
- `::after` – चयनित तत्व की सामग्री के बाद सामग्री जोड़ता है।
- `::first-line` – तत्व में पाठ की पहली पंक्ति पर शैलियाँ लागू करता है।
- `::पहला अक्षर` – तत्व में पाठ के पहले अक्षर पर शैलियाँ लागू करता है।
सीएसएस फ़ाइलें आयात करें
आपके कोड को अधिक संरचित और बनाए रखने में आसान बनाने के लिए, सीएसएस आपको अन्य फ़ाइलों से शैलियों को आयात करने की अनुमति देता है। यह `@import` कमांड से हासिल किया जाता है, जिसे सीएसएस फ़ाइल के शीर्ष पर रखा जा सकता है।
इस तरह, आप शैलियों को अलग-अलग फ़ाइलों में विभाजित कर सकते हैं, जिससे उन्हें संपादित करना आसान हो जाएगा और प्रत्येक का आकार कम हो जाएगा।
कैस्केडिंग और प्राथमिकताएं
सीएसएस कैस्केडिंग के सिद्धांत पर आधारित है, जिसका अर्थ है कि शैलियों को विभिन्न स्थानों और स्रोतों में परिभाषित किया जा सकता है, और ब्राउज़र प्राथमिकताओं के आधार पर तय करेगा कि कौन सी शैली लागू की जाए। कैस्केडिंग में शामिल हैं:
- चयनकर्ता प्राथमिकता: ब्राउज़र चयनकर्ताओं की विशिष्टता का सम्मान करता है। चयनकर्ता जितना अधिक विशिष्ट होगा, उसकी प्राथमिकता उतनी ही अधिक होगी।
- शैली क्रम: यदि दो नियमों की विशिष्टता समान है, तो अंतिम नियम तत्व पर लागू किया जाएगा।
- शैली का महत्व: आप `!important` का उपयोग करके किसी शैली का महत्व निर्धारित कर सकते हैं। इससे स्टाइल को प्राथमिकता मिलती है।
p{
color: red !important;
}
भविष्य में कोड रखरखाव संबंधी समस्याओं से बचने के लिए `!important` का सावधानीपूर्वक उपयोग करना महत्वपूर्ण है।
मीडिया प्रश्न
सीएसएस स्क्रीन की चौड़ाई और रिज़ॉल्यूशन जैसी डिवाइस सेटिंग्स के आधार पर शैलियों को अनुकूलित करने की अनुमति देता है। मीडिया क्वेरीज़ आपको रिस्पॉन्सिव डिज़ाइन बनाने की अनुमति देती हैं जो मोबाइल फोन से लेकर डेस्कटॉप तक विभिन्न उपकरणों पर अच्छे लगते हैं।
मीडिया क्वेरी उदाहरण:
@media screen and (max-width: 768px) {
/* styles for devices with screen widths up to 768px */
body {
font-size: 14px;
}
}
इस उदाहरण में, शैलियों को पृष्ठ तत्वों पर तब लागू किया जाएगा जब स्क्रीन की चौड़ाई 768 पिक्सेल से अधिक न हो।
सीएसएस वेब पेजों को स्टाइल करने के लिए एक शक्तिशाली उपकरण है, और ये बुनियादी बातें आपको सुंदर और कार्यात्मक डिज़ाइन बनाने के लिए इसका उपयोग शुरू करने में मदद करेंगी। अभ्यास और अनुभव आपको अपने कौशल में सुधार करने और एक अनुभवी फ्रंट-एंड डेवलपर बनने में मदद करेगा।
