इनलाइन CSS किसी HTML टैग के अंदर सीधे CSS स्टाइल लागू करता है। स्टाइल HTML एट्रिब्यूट किसी एलिमेंट की स्टाइल सेट करता है। इनलाइन CSS नियम अन्य CSS दस्तावेजों से आने वाली स्टाइल्स को ओवरराइड करते हैं क्योंकि वे सीधे एलिमेंट पर लागू होते हैं।
CSS स्टाइल्स का परिचय
HTML प्रोग्रामिंग भाषा वेब पेज की संरचना को परिभाषित करने के लिए उपयोग की जाती है। CSS आपको HTML एलिमेंट्स में अपनी कस्टम स्टाइल्स जोड़ने की अनुमति देता है। इससे आप वेब पेज पर एलिमेंट्स के रूप-रंग को अनुकूलित कर सकते हैं। वेब पेज में CSS जोड़ने के तीन तरीके हैं: इनलाइन CSS, इंटरनल CSS, और एक्सटर्नल CSS। इस ट्यूटोरियल में हम इनलाइन CSS पर ध्यान केंद्रित करेंगे।
CSS का इतिहास और तीन तरीके
1996 में CSS पेश किया गया था। CSS ने वेबसाइट की प्रस्तुति और सामग्री को अलग करना संभव बनाया। CSS का उपयोग करके आप आसानी से वेब पेज पर स्टाइल्स जोड़ सकते हैं और उन्हें पेज के विशिष्ट एलिमेंट्स पर लागू कर सकते हैं।
वेब पेज पर स्टाइल्स लागू करने के तीन तरीके हैं:
- इनलाइन CSS: यह तरीका एक ही एलिमेंट पर यूनिक स्टाइल लागू करता है।
- एक्सटर्नल CSS: इसमें एक अलग CSS फाइल बनाई जाती है जो वेब पेज की सभी स्टाइल्स स्टोर करती है।
- इंटरनल CSS: इसमें
<style>टैग का उपयोग करके HTML फाइल के लिए स्टाइल्स परिभाषित की जाती हैं।
इनलाइन CSS: विस्तृत गाइड
इनलाइन CSS किसी HTML एलिमेंट पर स्टाइल लागू करता है। आपको हर उस एलिमेंट के लिए इनलाइन CSS निर्दिष्ट करना होगा जिस पर आप स्टाइल लागू करना चाहते हैं। यह किसी विशेष एलिमेंट के साथ काम करने के लिए सेलेक्टर्स का उपयोग करने का एक विकल्प है।
मान लीजिए आप वेब पेज पर टेक्स्ट के एक पैराग्राफ का रंग या फॉन्ट साइज बदलना चाहते हैं। अलग स्टाइलशीट में नियम लिखने के बजाय, आप उस पैराग्राफ पर सीधे स्टाइल जोड़ सकते हैं जिसका रंग आप बदलना चाहते हैं।
इनलाइन लागू किए गए नियम इंटरनल या एक्सटर्नल स्टाइलशीट में लागू किसी भी स्टाइल को ओवरराइड कर देंगे।
CSS इनलाइन उपयोग करने के लिए, आप किसी एलिमेंट के "style" एट्रिब्यूट में सीधे CSS स्टाइल निर्दिष्ट कर सकते हैं। आइए एक उदाहरण से समझते हैं:
मान लीजिए हम वेब पेज पर एक हेडिंग का टेक्स्ट रंग हरा करना चाहते हैं। हम निम्न कोड का उपयोग कर सकते हैं:
<h1 style="color: green;">This is a Heading</h1>
उपरोक्त कोड हमारे हेडिंग का CSS फॉन्ट रंग हरा सेट करता है। चूंकि हम अपनी स्टाइल केवल इस हेडिंग पर लागू करना चाहते हैं, इसलिए हमने इसे सीधे CSS इनलाइन का उपयोग करके जोड़ा है।
इनलाइन CSS स्टाइल्स कब उपयोग करें
CSS इनलाइन स्टाइल्स का उपयोग वेब पेज पर परिवर्तनों का पूर्वावलोकन करने या पेज पर एक एलिमेंट में स्टाइल जोड़ने के लिए किया जाता है।
इनलाइन स्टाइल्स का उपयोग विशिष्ट परिवर्तनों का पूर्वावलोकन करने के लिए किया जाता है क्योंकि आप CSS सेलेक्टर से मेल खाने वाले सभी एलिमेंट्स के बजाय एक विशिष्ट एलिमेंट के साथ काम कर सकते हैं। आपको परिवर्तन का पूर्वावलोकन करने के लिए स्टाइलशीट बदलने की चिंता करने की आवश्यकता नहीं है।
इनलाइन स्टाइल्स का उपयोग वेब पेज पर एक एलिमेंट पर CSS नियम जोड़ने के लिए किया जाता है। इसलिए, यदि आप टेक्स्ट के एक पैराग्राफ की चौड़ाई 500px सेट करना चाहते हैं, तो आप कर सकते हैं। लेकिन यदि आप कई पैराग्राफ की चौड़ाई 500px सेट करना चाहते हैं, तो आपको स्टाइलिंग की किसी अन्य विधि का उपयोग करना चाहिए।
जब संयम से उपयोग किया जाता है, तो इनलाइन CSS वेब पेज पर एलिमेंट्स पर स्टाइल लागू करने का एक अच्छा तरीका है। हालांकि, इनलाइन CSS का अत्यधिक उपयोग आसानी से गड़बड़ कोड का कारण बन सकता है।
इनलाइन स्टाइल्स को अपडेट करना मुश्किल होता है क्योंकि आपको प्रत्येक स्टाइल को मैन्युअली बदलना पड़ता है। दूसरी ओर, स्टाइलशीट में स्टाइल्स ब्रॉड सेलेक्टर्स का उपयोग कर सकती हैं। ये सेलेक्टर्स एक HTML दस्तावेज़ में कई एलिमेंट्स को प्रभावित कर सकते हैं।
जब आप किसी एलिमेंट पर नियमों की बड़ी सूची लागू करना चाहते हैं तो अक्सर इंटरनल या एक्सटर्नल CSS का उपयोग करना बेहतर होता है। इसलिए, यदि आप किसी एलिमेंट पर छह या सात CSS प्रॉपर्टीज लागू करना चाहते हैं, तो आप इनलाइन CSS का उपयोग करने से बचना चाह सकते हैं।
ऐसा इसलिए है क्योंकि, जैसा कि हमने उल्लेख किया, इनलाइन CSS का अत्यधिक उपयोग आपके कोड को गड़बड़ बना सकता है। यदि किसी HTML एलिमेंट के अंदर छह CSS नियम हैं, तो इससे आपके कोड में एलिमेंट को देखना अधिक कठिन हो जाता है।
निष्कर्ष
इनलाइन CSS स्टाइल्स वेब पेज पर एक विशिष्ट एलिमेंट पर स्टाइल लागू करती हैं। सामान्य तौर पर, CSS इनलाइन का उपयोग तब सबसे अच्छा होता है जब आप किसी परिवर्तन का पूर्वावलोकन करना चाहते हैं या वेब पेज पर केवल कुछ एलिमेंट्स को स्टाइल करना चाहते हैं। यदि आप किसी एलिमेंट पर अधिक स्टाइल्स लागू करना चाहते हैं, तो इंटरनल या एक्सटर्नल स्टाइलशीट का उपयोग करना आमतौर पर पसंद किया जाता है।
इस ट्यूटोरियल में, उदाहरणों के संदर्भ में, CSS में स्टाइलिंग की मूल बातें और CSS इनलाइन स्टाइल्स का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप एक पेशेवर वेब डेवलपर की तरह CSS इनलाइन का उपयोग शुरू करने के लिए तैयार हैं।
CSS में कोडिंग के बारे में अधिक जानने के लिए, How to Learn CSS पर हमारी पूरी गाइड पढ़ें।
