CSS टाइप सेलेक्टर (जिसे एलिमेंट टाइप सेलेक्टर भी कहा जाता है) का उपयोग HTML एलिमेंट्स को उनके प्रकार के आधार पर टार्गेट करने के लिए किया जाता है। प्रकार कोई भी बिल्ट-इन HTML एलिमेंट हो सकता है, जैसे <h2>, <p>, <button>।
टाइप सेलेक्टर सिंटैक्स
हम टाइप सेलेक्टर के माध्यम से एलिमेंट्स को स्टाइल करने के लिए निम्नलिखित सिंटैक्स का उपयोग करते हैं:
element-name { property-name: value; }उदाहरण के लिए आइए इस बटन एलिमेंट को उसके टाइप सेलेक्टर के माध्यम से स्टाइल करें:
<button>मुझे क्लिक करें!</button>CSS:
button { font-size: 32px; padding: 1rem; color: red; }परिणाम:
जब आप टाइप सेलेक्टर का उपयोग करते हैं तो आप अपनी वेबसाइट पर एलिमेंट्स को व्यापक रूप से स्टाइल करते हैं।
इसलिए यदि आपकी वेबसाइट पर 10 बटन एलिमेंट्स हैं, और आप उपरोक्त CSS का उपयोग करते हैं, तो हर बटन को वही स्टाइलिंग मिलेगी। यह हो सकता है या नहीं हो जो आप चाहते हैं, संदर्भ के आधार पर।
बेस स्टाइल्स
HTML एलिमेंट्स पर सीधे कुछ व्यापक बेस स्टाइलिंग सेट करना एक अच्छा विचार हो सकता है। हालांकि, बेस स्टाइलिंग जितना संभव हो उतना अनस्पेसिफिक होनी चाहिए। यह आपके UI में सार्थक विज़ुअल कंसिस्टेंसी लागू करने के तरीके के रूप में काम करना चाहिए — और अनावश्यक कोड दोहराव से बचना चाहिए।
वे क्षेत्र जिनमें आप अक्सर कंसिस्टेंट होना चाहते हैं:
- फॉन्ट्स (जिन्हें टाइपफेसेस भी कहा जाता है)
- फ़ॉन्ट साइज़
- लाइन हाइट
- रंग
- स्पेसिंग (व्हाइटस्पेस)
उदाहरण के लिए, अपने UI में फ़ॉन्ट फैमिलीज़ की पसंद के साथ कंसिस्टेंट होना एक अच्छी प्रथा है। आप 5 अलग-अलग फॉन्ट्स का उपयोग नहीं करना चाहते, यह आपके UI को अजीब और असंगत दिखाता है। आप अधिकांश वेबसाइट्स पर 1 और अधिकतम 3 अलग-अलग फ़ॉन्ट फैमिलीज़ के बीच चाहते हैं।
मान लें आप अपनी वेबसाइट पर दो प्रकार के फॉन्ट्स का उपयोग करना चाहते हैं:
- अपने पैराग्राफ्स और सूचियों के लिए एक सेरिफ़
- बाकी सब चीजों के लिए एक सैंस सेरिफ़।
इस मामले में, उन फ़ॉन्ट फैमिलीज़ को लागू करने के लिए ब्रॉड टाइप सेलेक्टर का उपयोग करना पूरी तरह से समझ में आता है:
/* Roboto एक सैंस सेरिफ़ है*/ html, body { font-family: roboto; } /* Merriweather एक सेरिफ़ है*/ p, li { font-family: merriweather; }उपरोक्त CSS के साथ, हर HTML एलिमेंट Roboto फ़ॉन्ट का उपयोग करेगा, पैराग्राफ्स और सूचियों को छोड़कर जो Merriweather का उपयोग करेंगे।
टाइप सेलेक्टर का उपयोग कब न करें?
किसी भी एलिमेंट को ब्रॉड स्ट्रोक से "ओवर स्टाइल" करना आम तौर पर बुरी प्रथा है क्योंकि यह आपके पेज पर उस एलिमेंट के हर प्रतिनिधित्व को प्रभावित करता है।
उदाहरण के लिए, अपने CSS में यह न करें:
button { font-size: 1.125rem; padding: 1.5rem; margin-top: 1rem; border-radius: 8px; border: 1px solid #444444; color: green; background-color: black; transition: all 1s ease-in; }उपरोक्त आपकी वेबसाइट पर हर बटन एलिमेंट पर स्टाइल्स का एक गुच्छा लागू करेगा। संभावना है कि आपकी वेबसाइट पर अलग-अलग भूमिकाओं वाले कई बटन हैं। हालांकि आप बेस UI डिजाइन को कंसिस्टेंट चाहते हैं (विशेष रूप से टाइपोग्राफी) आप शायद उन सभी को बिल्कुल एक जैसा दिखना या व्यवहार नहीं करना चाहते। विशेष रूप से मार्जिन वैल्यूज जैसी चीजें किसी भी दिए गए एलिमेंट प्रकार पर व्यापक रूप से लागू करना खतरनाक है।
बेशक, आप क्लास सेलेक्टर का उपयोग करके किसी एलिमेंट पर किसी भी बेस स्टाइलिंग को हमेशा ओवरराइड कर सकते हैं। हालांकि, क्लासेस का उपयोग करने का उद्देश्य बेस स्टाइल्स को एलिमेंट सेलेक्टर से पास डाउन करके अनडू/ओवरराइड करने में समय बिताना नहीं है।
एलिमेंट्स पर क्लासेस का उपयोग करने का उद्देश्य है:
- विशिष्ट स्थितियों में एलिमेंट्स पर बेस स्टाइल्स को विस्तारित करना जो इसके लिए कहते हैं। उदाहरण के लिए, आप अपने हीरो सेक्शन्स पर कॉल टू एक्शन बटन को हर जगह से थोड़ा बड़ा चाहते हैं।
- पुन: प्रयोज्यता। क्लासेस को अनंत रूप से पुन: उपयोग किया जा सकता है, जो उन्हें लचीला और कुशल बनाता है। इसका एक बढ़िया उदाहरण टेलविंड CSS फ्रेमवर्क है जो सिंगल-पर्पस यूटिलिटी क्लासेस पर आधारित है, जिसे फंक्शनल CSS के रूप में भी जाना जाता है।
सारांश में:
- अपने ब्रांड की विज़ुअल पहचान को कंसिस्टेंसी के माध्यम से लागू करने के लिए सामान्य स्टाइल्स का बेसलाइन स्थापित करने के लिए टाइप सेलेक्टर का उपयोग करें।
- क्लासेस (और कभी-कभी IDs) का उपयोग बेस स्टाइल्स के ऊपर निर्माण करने के लिए करें, ताकि एलिमेंट्स को उनकी भूमिका के आधार पर स्टाइल किया जा सके, जिस विशिष्ट वातावरण में वे हैं।
