CSS क्या है और यह कैसे काम करता है? 2024 गाइड़

CSS Kya Hai – CSS क्या है

CSS को W3C (वर्ल्ड वाइड वेब कंसोर्टियम) द्वारा 1996 में एक साधारण कारण से विकसित किया गया था। HTML एलिमेंट को ऐसे टैग के लिए डिज़ाइन नहीं किया गया था जो पेजे को फॉर्मेट करने में मदद करेगा। आपको केवल वेब पेज के लिए मार्कअप लिखना था।

<font> जैसे टैग HTML वर्शन 3.2 में पेश किए गए थे, और इससे वेब डेवलपर्स के लिए काफी परेशानी हुई। इस तथ्य के कारण कि वेब पेजों में अलग-अलग फ़ॉन्ट, रंगीन बैकग्राउंडस और कई स्टाइल्स हैं, कोड को फिर से लिखना एक लंबी, दर्दनाक और महंगी प्रोसेस थी। इस प्रकार, इस समस्या को हल करने के लिए W3C द्वारा CSS बनाया गया था।

CSS तकनीकी रूप से एक आवश्यकता नहीं है, लेकिन आप शायद ऐसे वेब पेज को नहीं देखना चाहेंगे जिसमें केवल HTML एलिमेंट्स हों क्योंकि यह पूरी तरह से अव्यवस्थित दिखेगा।

उद्देश्य:

CSS क्या है? के इस आर्टिकल को पूरा पढ़ने के बाद, आप निम्न में सक्षम होंगे:

CSS Kya Hai? CSS क्या है?

What is CSS in Hindi

CSS का मतलब Cascading Style Sheets लैंग्वेज है और इसका उपयोग HTML जैसी मार्कअप लैंग्वेज में लिखे गए एलिमेंट्स को स्टाइल करने के लिए किया जाता है। यह कंटेंट को साइट के दृश्य प्रतिनिधित्व से अलग करता है। HTML और CSS के बीच का संबंध मजबूती से एक-दूसरे से जुड़ा हुआ है क्योंकि HTML किसी साइट की नींव है और CSS पूरी वेबसाइट का सौंदर्यशास्त्र है।

What is CSS in Hindi?

CSS (कैस्केडिंग स्टाइल शीट्स) एक सरल रूप से डिज़ाइन की गई लैंग्वेज है जिसका उद्देश्य वेब पेजों को प्रस्तुत करने योग्य बनाने की प्रोसेस को सरल बनाना है। CSS आपको HTML डयॉक्‍यूमेंटस् में स्टाइल्स लागू करने की अनुमति देता है। यह बताता है कि एक वेबपेज कैसा दिखना चाहिए। यह रंग, फ़ॉन्ट, रिक्ति आदि निर्धारित करता है। संक्षेप में, आप अपनी वेबसाइट को जैसा चाहें वैसा बना सकते हैं। CSS डेवलपर्स और डिज़ाइनरों को यह परिभाषित करने देता है कि यह कैसे व्यवहार करता है, जिसमें ब्राउज़र में एलिमेंट्स की स्थिति भी शामिल है।

HTML टैग का उपयोग करता है और CSS नियमसेट का उपयोग करता है। CSS स्टाइल्स को सिलेक्टर का उपयोग करके HTML एलिमेंट्स पर लागू किया जाता है। CSS सीखना और समझना आसान है, लेकिन यह HTML डयॉक्‍यूमेंट की प्रस्तुति पर शक्तिशाली नियंत्रण प्रदान करता है।

वेब पेजों पर CSS के लाभ

Advantages of CSS in Hindi

CSS लागू करने वाले वेब पेज और नहीं लागू करने वाले वेब पेज के बीच अंतर बहुत बड़ा और निश्चित रूप से ध्यान देने योग्य है।

आपने ऐसी वेबसाइट देखी होगी जो पूरी तरह से लोड नहीं हो पाती है और उसकी बैकग्राउंड का रंग सफेद है और अधिकांश टेक्स्ट नीला और काला है। इसका मतलब है कि वेब पेज का CSS भाग ठीक से लोड नहीं हुआ या यह पूरी तरह से मौजूद नहीं है।

केवल HTML वाले वेब पेज ऐसे ही दिखते हैं, और मुझे लगता है कि आप सहमत होंगे कि यह बहुत आकर्षक नहीं है।

CSS का उपयोग करने से पहले, सभी स्टाइलिंग को HTML मार्कअप में शामिल करना पड़ता था। इसका मतलब है कि वेब डेवलपर्स को बैकग्राउंडस का रंग, फ़ॉन्ट साइज, एलाइनमेंट आदि का अलग से वर्णन करना होगा।

CSS आपको एक अलग फ़ाइल पर सब कुछ स्टाइल करने देता है, इस प्रकार वहां डिज़ाइन बनाता है और बाद में HTML मार्कअप के शीर्ष पर CSS फ़ाइलों को इंटिग्रेट करता है। यह वास्तविक HTML मार्कअप को अधिक स्वच्छ और बनाए रखने में आसान बनाता है।

संक्षेप में, CSS सुविधाओं के साथ आपको बार-बार यह वर्णन करने की आवश्यकता नहीं है कि व्यक्तिगत एलिमेंट्स कैसे दिखते हैं। इससे समय की बचत होती है, कोड छोटा हो जाता है और त्रुटियों की संभावना कम हो जाती है।

CSS आपको एक HTML पेज पर कई स्टाइल्स रखने की सुविधा देता है, जिससे कस्‍टमाइज़ेशन की संभावनाएँ लगभग अनंत हो जाती हैं। आजकल यह एक वस्तु से अधिक एक आवश्यकता बनती जा रही है।

CSS क्यों?

• CSS समय बचाता है: आप एक बार CSS लिख सकते हैं और एक ही शीट को कई HTML पेजेज में पुन: उपयोग कर सकते हैं।
• आसान मेंटेनेंस: वैश्विक परिवर्तन करने के लिए बस स्टाइल बदलें, और सभी वेबपेजों के सभी एलिमेंट्स आटोमेटिकली अपडेट हो जाएंगे।
• सर्च इंजन: CSS को एक स्वच्छ कोडिंग तकनीक माना जाता है, जिसका अर्थ है कि सर्च इंजनों को इसके कंटेंट को “पढ़ने” के लिए संघर्ष नहीं करना पड़ेगा।
• HTML की तुलना में बेहतर स्टाइल्स: CSS में HTML की तुलना में विशेषताओं की अधिक विस्तृत श्रृंखला होती है, इसलिए आप HTML विशेषताओं की तुलना में अपने HTML पेज को कहीं बेहतर लुक दे सकते हैं।
• ऑफ़लाइन ब्राउज़िंग: CSS ऑफ़लाइन कैश की सहायता से वेब एप्लिकेशन को स्थानीय रूप से संग्रहीत कर सकता है। इसके प्रयोग से हम ऑफलाइन वेबसाइट देख सकते हैं।

CSS सिंटैक्स

Syntax of CSS in Hindi

CSS में स्टाइल नियम शामिल होते हैं जिनकी व्याख्या ब्राउज़र द्वारा की जाती है और फिर आपके डयॉक्‍यूमेंट में संबंधित एलिमेंट्स पर लागू की जाती है। स्टाइल नियम सेट में एक सिलेक्टर और डिक्लेरेशन ब्लॉक होता है।

CSS सिंटैक्स नियम में एक Selector, Property, और उसकी Value शामिल होती है। सिलेक्टर HTML एलिमेंट्स को इंगित करता है जहां CSS स्टाइल लागू की जानी है। CSS प्रॉपर्टी को अर्धविराम से अलग किया गया है। यह Selector नाम का एक संयोजन है जिसके बाद संपत्ति: Value जोड़ी होती है जिसे विशिष्ट सिलेक्टर के लिए परिभाषित किया जाता है।

सिंटेक्स

selector { Property: value; }

उदाहरण के लिए, हमने कुछ प्रॉपर्टी: वैल्यू पेयर असाइन करने के साथ-साथ एक हेडिंग टैग (h1) घोषित किया है जिसका उपयोग हेडिंग टैग को स्टाइल करने के लिए किया जाता है।

यहां, h1 सिलेक्टर है, {color: blue; font-family: sans-serif; } एक डिक्लेरेशन ब्लॉक है और इसमें अर्धविराम से अलग की गई एक या अधिक डिक्लेरेशन हो सकती हैं, color: blue; एक property: value पेयर हैं जिसे HTML एलिमेंट्स को स्टाइल करने के लिए उस पर लागू किया जाता है।

प्रत्येक डिक्लेरेशन में एक CSS प्रॉपर्टी का नाम और एक वैल्यू होता है, जो एक कोलन (:) से अलग होता है और घुंघराले ब्रेसिज़ ({ }) से घिरा होता है। एकाधिक CSS प्रॉपर्टीज को घोषित करने के लिए, इसे अर्धविराम (;) द्वारा अलग किया जा सकता है।

आइए इनमें से प्रत्येक को परिभाषित करें:

• Declaration: किसी प्रॉपर्टी और उसके संबंधित मूल्य का संयोजन।
• Selector: स्टाइल्स को लागू करने के लिए विशिष्ट HTML एलिमेंट्स को लक्षित और चयन करने के लिए उपयोग किया जाता है।
• Property: किसी एलिमेंट्स के विशिष्ट पहलू या विशेषता को परिभाषित करता है जिसे आप मॉडिफाई करना चाहते हैं।
• Value: किसी दिए गए प्रॉपर्टी के लिए निर्दिष्ट सेटिंग या पैरामीटर, यह निर्धारित करना कि चयनित एलिमेंट्स कैसा दिखना चाहिए या व्यवहार करना चाहिए।
• Output: उपरोक्त कोड में, h1 एक h1 टैग का सिलेक्टर है, यह उस h1 एलिमेंट्स को सिलेक्‍ट करता है जिसे आप स्टाइल करना चाहते हैं। रंग एक प्रॉपर्टी है और नीला उस प्रॉपर्टी की value है, इसी तरह से text-align प्रॉपर्टी है और center उस प्रॉपर्टी की value है।

CSS कैसे काम करता है?

Working of CSS in Hindi

हमने CSS की मूल बातें सीखी हैं, यह क्या है और सरल स्टाइलशीट कैसे लिखी जाती है। इस सेक्‍शन में हम देखेंगे कि कैसे एक ब्राउज़र CSS और HTML लेता है और उसे एक वेबपेज में बदल देता है।

CSS नियमों के एक सेट के साथ एक सरल अंग्रेजी आधारित सिंटेक्स का उपयोग करता है जो इसे कंट्रोल करता है। जैसा कि हमने पहले उल्लेख किया है, HTML का उद्देश्य कभी भी स्टाइल एलिमेंट्स का उपयोग करना नहीं था, केवल पेज का मार्कअप था। इसे केवल कंटेंट का वर्णन करने के लिए बनाया गया था। उदाहरण के लिए: <p>यह एक पैराग्राफ है</p>।

लेकिन आप पैराग्राफ को कैसे स्टाइलबद्ध करते हैं? CSS सिंटैक्स संरचना बहुत सरल है। इसमें एक सिलेक्टर और एक डिक्लेरेशन ब्लॉक है। आप एक एलिमेंट्स का चयन करते हैं और फिर घोषित करते हैं कि आप इसके साथ क्या करना चाहते हैं। बिल्कुल सीधा, है ना?

हालाँकि, ऐसे नियम हैं जिन्हें आपको याद रखना होगा। स्ट्रक्चर नियम बहुत सरल हैं, इसलिए चिंता न करें।

सिलेक्टर उन HTML एलिमेंट्स को इंगित करता है जिन्हें आप स्टाइल करना चाहते हैं। डिक्लेरेशन ब्लॉक में अर्धविराम द्वारा अलग की गई एक या अधिक डिक्लेरेशन होती हैं।

प्रत्येक डिक्लेरेशन में एक CSS संपत्ति का नाम और एक वैल्यू शामिल होता है, जो एक कोलन द्वारा अलग किया जाता है। CSS डिक्लेरेशन हमेशा अर्धविराम के साथ समाप्त होता है, और डिक्लेरेशन ब्लॉक घुंघराले ब्रेसिज़ से घिरे होते हैं।

आइए एक उदाहरण देखें:

सभी <p> एलिमेंट्स नीले और बोल्ड लाल के होंगे।

दूसरे उदाहरण में, सभी <p> एलिमेंट्स सेंटर-संरेखित होंगे, 16x चौड़े और निले होंगे।

CSS वास्तव में कैसे काम करता है?

जब कोई ब्राउज़र किसी डयॉक्‍यूमेंट को प्रदर्शित करता है, तो उसे डयॉक्‍यूमेंट के कंटेंट को उसकी स्टाइल की जानकारी के साथ जोड़ना होगा। यह डयॉक्‍यूमेंट को कई चरणों में प्रोसेस करता है, जिन्हें हमने नीचे सूचीबद्ध किया है।

यह ध्यान में रखें कि जब कोई ब्राउज़र किसी वेबपेज को लोड करता है तो क्या होता है इसका यह एक बहुत ही सरल वर्शन है, और विभिन्न ब्राउज़र इस प्रोसेस को अलग-अलग तरीकों से संभालेंगे। लेकिन मोटे तौर पर यही होता है।

• ब्राउज़र HTML को लोड करता है (उदाहरण के लिए इसे नेटवर्क से प्राप्त करता है)।
• यह HTML को DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में कन्‍वर्ट करता है। DOM कंप्यूटर की मेमोरी में डयॉक्‍यूमेंट का प्रतिनिधित्व करता है। DOM को अगले भाग में थोड़ा और विस्तार से समझाया गया है।
• ब्राउज़र तब अधिकांश रिसोर्सेस को प्राप्त करता है जो HTML डयॉक्‍यूमेंट से जुड़े होते हैं, जैसे एम्बेडेड इमेजेज, वीडियो और यहां तक कि लिंक किए गए CSS! इस प्रोसेस में जावास्क्रिप्ट को थोड़ा बाद में संभाला जाता है, और चीजों को सरल बनाए रखने के लिए हम यहां इसके बारे में बात नहीं करेंगे।
• ब्राउज़र प्राप्त CSS की पदव्याख्या करता हैं, और विभिन्न नियमों को उनके सिलेक्टर प्रकारों के अनुसार अलग-अलग “बकेट” में क्रमबद्ध करता है, उदाहरण के लिए element, class, ID, इत्यादि। इसे मिलने वाले सिलेक्टर्स के आधार पर, यह पता लगाता है कि DOM में किन नोड्स पर कौन से नियम लागू होने चाहिए, और आवश्यकतानुसार उनमें स्टाइल जोड़ता है (इस मध्यवर्ती चरण को रेंडर ट्री कहा जाता है)।
• रेंडर ट्री को उस स्ट्रक्चर में रखा गया है जिसमें नियम लागू होने के बाद उसे दिखना चाहिए।
• पेज का दृश्य परफॉरमेंस स्क्रीन पर दिखाया जाता है (इस चरण को पेंटिंग कहा जाता है)।

निम्नलिखित डायग्राम भी प्रोसेस का एक सरल दृश्य प्रस्तुत करता है।

👉 यह भी पढ़े: MS-DOS क्या है? विशेषताएं, लाभ, महत्व और तथ्य

DOM के बारे में

DOM में एक पेड़ जैसा स्ट्रक्चर होता है। मार्कअप लैंग्वेज में प्रत्येक एलिमेंट्स, एट्रिब्यूट और टेक्‍स्‍ट का टुकड़ा ट्री-स्ट्रक्चर में एक DOM नोड बन जाता है। नोड्स को अन्य DOM नोड्स के साथ उनके संबंध द्वारा परिभाषित किया जाता है। कुछ एलिमेंट्स चाइल्ड नोड्स के पैरेंटस् हैं, और चाइल्ड नोड्स के भाई-बहन हैं।

DOM को समझने से आपको अपने CSS को डिज़ाइन करने, डिबग करने और बनाए रखने में मदद मिलती है क्योंकि DOM वह जगह है जहाँ आपका CSS और डयॉक्‍यूमेंट के कंटेंट मिलते है।

जब आप ब्राउज़र DevTools के साथ काम करना शुरू करते हैं तो आप यह देखने के लिए आइटम का चयन करते समय DOM पर नेविगेट करेंगे कि कौन से नियम लागू होते हैं।

CSS के प्रकार

Types of CSS in Hindi

अब बात करते हैं CSS की विभिन्न स्टाइल्स के बारे में। वे Inline, External और Internal हैं।

Internal, External और Inline CSS स्टाइल्स

हम प्रत्येक स्टाइल पर संक्षेप में विचार करेंगे, प्रत्येक विधि की गहन व्याख्या के लिए, अवलोकन के नीचे एक लिंक होगा।

आइए इंटरनल स्टाइल के बारे में बात करके शुरुआत करें। इस तरह से की गई CSS स्टाइल्स हर बार पूरी वेबसाइट के रीफ्रेश होने पर लोड हो जाती हैं, जिससे लोडिंग समय बढ़ सकता है। इसके अतिरिक्त, आप एक ही CSS स्टाइल का उपयोग कई पेजेज पर नहीं कर पाएंगे क्योंकि यह एक ही पेज में समाहित है। हालाँकि, यह फायदे के साथ भी आता है। एक पेज पर सब कुछ होने से पूर्वावलोकन के लिए टेम्पलेट शेयर करना आसान हो जाता है।

एक्सटर्नल मेथड सबसे सुविधाजनक हो सकती है। सब कुछ बाह्य रूप से .css फ़ाइल पर किया जाता है। इसका मतलब है कि आप सभी स्टाइलिंग एक अलग फ़ाइल पर कर सकते हैं और CSS को अपने इच्छित किसी भी पेज पर लागू कर सकते हैं। एक्सटर्नल स्टाइल लोडिंग समय में भी सुधार कर सकती है।

अंत में, हम CSS की इनलाइन स्टाइल के बारे में बात करेंगे। Inline उन विशिष्ट एलिमेंट्स के साथ काम करता है जिनमें <style> टैग होता है। प्रत्येक कंपोनेंट को स्टाइलाइज़ करना होगा, इसलिए यह CSS को संभालने का सबसे अच्छा या तेज़ तरीका नहीं हो सकता है। लेकिन यह काम आ सकता है. उदाहरण के लिए, यदि आप किसी एक एलिमेंट्स को बदलना चाहते हैं, परिवर्तनों का त्वरित पूर्वावलोकन करना चाहते हैं, या हो सकता है कि आपके पास CSS फ़ाइलों का एक्‍सेस न हो।

CSS तीन प्रकार के होते हैं जो नीचे दिए गए हैं:

• Inline CSS: इनलाइन CSS में एलिमेंट्स से जुड़े बॉडी सेक्शन में CSS प्रॉपर्टी शामिल होती है।
• Internal या Embedded CSS: CSS नियम सेट हेड सेक्शन में HTML फ़ाइल के भीतर होना चाहिए यानी CSS HTML फ़ाइल के भीतर एम्बेडेड है।
• External CSS: एक्सटर्नल CSS में एक अलग CSS फ़ाइल होती है जिसमें टैग एट्रिब्यूट की सहायता से केवल स्टाइल प्रॉपर्टी होती हैं।

CSS प्रमुख विशेषताएं

Key Features of CSS in Hindi

• CSS निर्दिष्ट करता है कि HTML एलिमेंट्स को स्क्रीन पर कैसे प्रदर्शित किया जाना चाहिए।
• CSS की प्रमुख विशेषता में Styling Rules शामिल हैं जिनकी व्याख्या क्लाइंट ब्राउज़र द्वारा की जाती है और विभिन्न एलिमेंट्स पर लागू किए जाते है।
• CSS का उपयोग करके, आप कलर टेक्स्ट, फ़ॉन्ट की स्टाइल, एलिमेंट्स के बीच अंतर, कॉलम का आकार कैसे, विभिन्न डिवाइसेस के लिए डिस्प्ले में भिन्नता और स्क्रीन आकार के साथ-साथ कई अन्य इफेक्‍टस् को कंट्रोल कर सकते हैं।

CSS की मूल बातें

Basics of CSS in Hindi

कैस्केडिंग स्टाइल शीट्स (CSS) वेब की डिज़ाइन लैंग्वेज के रूप में काम करती है, जो डेवलपर्स को HTML एलिमेंट्स की दृश्य प्रेजेंटेशन को कंट्रोल करने की क्षमता प्रदान करती है। चाहे आप एक अनुभवी डेवलपर हों या अभी अपनी वेब यात्रा शुरू कर रहे हों, CSS की मूल बातें समझना मौलिक है। आइए प्रमुख अवधारणाओं का पता लगाएं:

1. CSS Ruleset

एक CSS रूलसेट डयॉक्‍यूमेंट के विभिन्न टुकड़ों या एलिमेंट्स के लिए विभिन्न पुष्टि है। उद्देश्य कुछ विशिष्ट गुणों के लिए प्रॉपर्टीज का एक समूह एक अकेले, या जुड़े हुए HTML पेज में कंपोनेंट्स की एक विशेष व्यवस्था में लागू करना है।

2. CSS Selectors

एक CSS सिलेक्टर स्टाइलिंग उद्देश्यों के लिए HTML एलिमेंट्स का चयन करता है। CSS सिलेक्टर उनकी id, class, type, attribute आदि के अनुसार HTML एलिमेंट्स का चयन करते हैं। प्रभावी स्टाइलिंग के लिए CSS सिलेक्टर को समझना आवश्यक है।

सर्वाधिक उपयोगी सिलेक्टर्स की सूची:

a. Element Selector

CSS में एलिमेंट सिलेक्टर का उपयोग एलिमेंट्स के अंदर एलिमेंट्स का चयन करने के लिए किया जाता है यानी यह दो सिलेक्टर्स को जोड़ता है ताकि दूसरे सिलेक्टर द्वारा मिलान किए गए एलिमेंट्स का चयन किया जा सके यदि उनके पास पहले सिलेक्टर से मेल खाने वाला पहला एलिमेंट है।

सिंटेक्स:

element element {

      /* CSS Property */

}

उदाहरण:

आउटपुट:

b. CSS Class Selector

.class सिलेक्टर का उपयोग किसी विशेष क्‍लास एट्रिब्यूट से संबंधित सभी एलिमेंट्स का चयन करने के लिए किया जाता है। किसी विशेष क्‍लास के साथ एलिमेंट्स का चयन करने के लिए, क्‍लास नाम निर्दिष्ट करने वाले पिरियड (.) कैरेक्‍टर का उपयोग करें, यह उनके क्‍लास एट्रिब्यूट के कंटेंट के आधार पर HTML एलिमेंट से मेल खाएगा। class name का उपयोग अधिकतर CSS प्रॉपर्टी को किसी दिए गए क्लास में सेट करने के लिए किया जाता है।

सिंटेक्स:

.class {

    // CSS property

}

उदाहरण:

ह उदाहरण विशिष्ट HTML एलिमेंट के लिए क्‍लास सिलेक्टर को प्रदर्शित करता है।

आउटपुट:

c. Attribute Selector

CSS एट्रिब्यूटसिलेक्टर का उपयोग किसी विशिष्ट एट्रिब्यूट या एट्रिब्यूट वैल्‍यू वाले एलिमेंट का चयन करने के लिए किया जाता है। यह HTML एलिमेंट्स को कुछ विशिष्ट एट्रिब्यूटस् के आधार पर समूहीकृत करके स्टाइल करने का एक उत्कृष्ट तरीका है और एट्रिब्यूट सिलेक्टर समान एट्रिब्यूटस् वाले उन एलिमेंट्स का चयन करेगा।

कई प्रकार के एट्रिब्यूट सिलेक्टर हैं जिनकी चर्चा नीचे की गई है:

[attribute] Selector: इस प्रकार के एट्रिब्यूट सिलेक्टर का उपयोग उन सभी एलिमेंट्स का चयन करने के लिए किया जाता है जिनमें निर्दिष्ट एट्रिब्यूट होता है और उस विशेषता पर CSS प्रॉपर्टी लागू होती है। उदाहरण के लिए, selector [class] स्‍टाइल एट्रिब्यूट वाले सभी एलिमेंट्स का चयन करेगा।

उदाहरण:

आउटपुट:

d. Universal Selector

CSS में * सिलेक्टर का उपयोग HTML डयॉक्‍यूमेंट में सभी एलिमेंट्स का चयन करने के लिए किया जाता है। यह उन सभी एलिमेंट्स का भी चयन करता है जो किसी अन्य एलिमेंट के अंतर्गत हैं। इसे यूनिवर्सल सिलेक्टर भी कहा जाता है।

सिंटेक्स:

* {

    // CSS property

}

उदाहरण:

यह उदाहरण CSS यूनिवर्सल सिलेक्टर का उपयोग दिखाता है।

आउटपुट:

e. Id Selector

दी गई id की स्‍टाइल सेट करने के लिए “#” CSS id selector का उपयोग किया जाता है। आईडी एट्रिब्यूट HTML डयॉक्‍यूमेंट में विशिष्ट आइडेंटिफायर है। आईडी सिलेक्टर का उपयोग # कैरेक्‍टर के साथ किया जाता है।

सिंटेक्स:

#id {

    // CSS property

}

उदाहरण:

आउटपुट:

f. Pseudo-Class Selector

CSS में एक Pseudo-Class का उपयोग किसी एलिमेंट की विशेष स्थिति को परिभाषित करने के लिए किया जाता है। मौजूदा एलिमेंट्स पर उनकी स्थिति के आधार पर प्रभाव जोड़ने के लिए इसे CSS सिलेक्टर के साथ जोड़ा जा सकता है। उदाहरण के लिए, जब यूजर किसी एलिमेंट पर होवर करता है या किसी लिंक पर जाता है तो उसकी स्‍टाइल बदलना। ये सभी CSS में Pseudo Classes का उपयोग करके किया जा सकता है।

ध्यान दें कि pseudo-class नाम केस-संवेदी नहीं होते हैं।

सिंटेक्स:

selector: pseudo-class{

    property: value;

}

g. CSS Pseudo Elements

CSS छद्म pseudo-element एक सिलेक्टर में जोड़ा गया एक कीवर्ड है जो आपको चयनित एलिमेंट्स के एक विशिष्ट भाग को स्टाइल करने देता है। उदाहरण के लिए, किसी एलिमेंट के पहले अक्षर या पंक्ति को स्टाइल करना, और किसी एलिमेंट के कंटेंट से पहले या बाद में कंटेंट सम्मिलित करना। ये सब CSS में Pseudo Elements का उपयोग करके किया जा सकता है।

ध्यान दें कि pseudo-elements के विपरीत, pseudo-classes का उपयोग किसी एलिमेंट को उसकी स्थिति के आधार पर स्टाइल करने के लिए किया जा सकता है।

सिंटेक्स:

selector::pseudo-element {

     property: value;

}

👉 यह भी पढ़े: सिस्टम सॉफ्टवेयर क्या है? फीचर्स, प्रकार, उदाहरण [2024 गाइड]

3. CSS Combinators

CSS कॉम्बिनेटर दो सिलेक्टर्स के बीच संबंध समझाते हैं। CSS सिलेक्टर स्टाइल उद्देश्यों के लिए एलिमेंट्स का चयन करने के लिए उपयोग किए जाने वाले पैटर्न हैं। एक CSS सिलेक्टर एक साधारण सिलेक्टर या एक जटिल सिलेक्टर हो सकता है जिसमें कॉम्बिनेटर का उपयोग करके कनेक्‍टेड एक से अधिक सिलेक्टर शामिल होते हैं।

•        General Sibling selector (~)

•        Child selector (>)

•        Adjacent Sibling selector (+)

•        Descendant selector (space)

4. CSS सिलेक्टर्स के विभिन्न प्रकार

CSS विभिन्न प्रकार के सिलेक्टर प्रदान करता है जो आपको HTML डयॉक्‍यूमेंट में विभिन्न एलिमेंट्स को लक्षित करने की अनुमति देता है। सिलेक्टर्स का उपयोग HTML एलिमेंट्स को उनके एलिमेंट्स नाम, आईडी, क्‍लास, विशेषता और कई अन्य चीज़ों के आधार पर चुनने के लिए किया जाता है।

5. स्टाइलिंग टेक्स्ट

CSS टेक्स्ट फ़ॉर्मेटिंग प्रॉपर्टीज का उपयोग टेक्स्ट को फ़ॉर्मेट करने, टेक्स्ट को स्टाइल करने और alignment, word spacing, justification और text transformation जैसे विभिन्न प्रकार के हेरफेर करने के लिए किया जाता है।

6. CSS लेआउट

CSS लेआउट एक वेब पेज पर HTML एलिमेंट्स की व्यवस्था और स्थिति को संदर्भित करता है। यह किसी वेबसाइट की दृश्य स्ट्रक्चर, ऑर्गनाइजेशन और रिस्पोंसिवनेस को परिभाषित करने में महत्वपूर्ण भूमिका निभाता है। एक प्रभावी लेआउट प्राप्त करने में विभिन्न CSS प्रॉपर्टीज और तकनीकों को समझना शामिल है जो एलिमेंट्स के स्थान और आकार को कंट्रोल करते हैं।

CSS Kya Hai? पर निष्कर्ष:

आइए संक्षेप में बताएं कि हमने यहां CSS के बारे में क्या सीखा है और यह वेब पेजों की सुंदरता में कैसे मदद करता है:

CSS को HTML जैसी अन्य मार्कअप लैंग्वेज के साथ मिलकर काम करने के लिए बनाया गया था। इसका उपयोग किसी पेज को स्टाइलाइज़ करने के लिए किया जाता है।

CSS को लागू करने की तीन स्टाइल्स हैं, और आप एक साथ कई पेजेज को जोड़ने के लिए External स्टाइल का उपयोग कर सकते हैं।

आप आजकल किसी प्रकार के CSS कार्यान्वयन को देखे बिना बहुत दूर नहीं जा सकते क्योंकि यह मार्कअप लैंग्वेज जितनी ही एक आवश्यकता है।

कुल मिलाकर, हम आशा करते हैं कि आपको यह लेख उपयोगी लगा होगा, और यदि आपके कोई प्रश्न हैं, तो कृपया उन्हें नीचे कमेंट सेक्‍शन में छोड़ दें।

👉 यह भी पढ़े: Variable in Hindi: Variable क्या है? प्रकार, उपयोग

CSS क्या है? पर अक्‍सर पूछे जाने वाले प्रश्न

FAQ on CSS Kya Hai

अन्य टिप्‍स जो आपके काम के हैं:

एप्लीकेशन सॉफ्टवेयर क्या है? उदाहरण, प्रकार

Antivirus क्या है? परिभाषा, प्रकार और उपयोग