CSS (Cascading Style Sheets) सीखें, हिन्‍दी में।

CSS क्या है? (What is CSS in Hindi)

आज हम सीखेंगे की सीएसएस क्या है? कैसे सीखे? (What is CSS in Hindi), सीएसएस की फुल फॉर्म क्या है? (CSS Full Form in Hindi), सीएसएस स्टाइल के प्रकार (Types of CSS in Hindi) जैसा की हम जानते है की वेब डिजाइनिंग के लिए कैस्केडिंग स्टाइल शीट्स (CSS) का उपयोग किया जाता है। CSS को 1996 में W3C द्वारा विकसित किया गया था। यह एक स्टाइल शीट भाषा है, जिसका उपयोग मार्कअप भाषा में लिखे डॉक्यूमेंट के सुंदर और आकर्षण बनाने के लिए किया जाता है, जिसमें लेआउट (Layout), रंग (Colors) और फोंट (Fonts) जैसे तत्व शामिल हैं।

सीएसएस क्या है? कैसे सीखे? (What is CSS in Hindi)

सीएसएस एक वेब पेज को डायनामिक वेबपृष्ठ में बदलने का एक तरीका है। यह एचटीएमएल (HTML) के लिए एक अतिरिक्त सुविधा प्रदान करता है। यह आम तौर पर वेब पेजों और उपयोगकर्ता इंटरफेस की स्टाइल बदलने के लिए एचटीएमएल के साथ प्रयोग किया जाता है। इसका उपयोग XML, SVG, और XUL सहित किसी भी प्रकार के एक्सएमएल डाक्यूमेंट्स (XML Documents) के साथ भी किया जा सकता है।

कई मोबाइल एप्लिकेशन (Mobile Applications) के लिए वेब अनुप्रयोगों (Web Applications) और उपयोगकर्ता इंटरफेस (User Interfaces) के लिए उपयोगकर्ता इंटरफेस बनाने के लिए अधिकांश वेबसाइटों में सीएसएस का उपयोग एचटीएमएल और जावास्क्रिप्ट के साथ किया जाता है। यदि आप सीएसएस सीखते हैं, तो आप एक अच्छी वेबसाइट स्टाइल कर सकते हैं तो मूल रूप से आप कह सकते हैं कि सीएसएस हमारे वेबपृष्ठ पर मेक-अप के रूप में कार्य करता है।

यदि आप वेब डिज़ाइनिंग या वेब डेवलपमेंट में अपना कैरियर बनाना चाहते हैं तो आपको सीएसएस का उपयोग आना अनिवार्य है। मुझे उम्मीद है कि अब आप HTML – CSS की कांसेप्ट को समझ चुके हैं।

[adinserter block=”2″]

सीएसएस की फुल फॉर्म क्या है? (CSS Full Form in Hindi)

सीएसएस का फुल फॉर्म “Cascading Style Sheet” है। कैस्केडिंग स्टाइल शीट का उपयोग वेब पृष्ठों के लेआउट को स्टाइल करने के लिए किया जाता है। उनका उपयोग टेक्स्ट कलर, फ़ॉन्ट और स्टाइल और वेब पृष्ठों के अन्य पहलुओं को डिजाईन करने के लिए किया जा सकता है। सीएसएस वेब डेवलपर्स को वेबसाइट को सुंदर और आकर्षक बनाने में मदद करता है।

[adinserter block=”3″]

सीएसएस स्टाइल के प्रकार (Types of CSS in Hindi)

  1. Inline Styles Sheet:- नीचे दिए गए उदाहरण को देखें, बॉडी टैग में, स्टाइल एट्रिब्यूट डिफाइन की गई है। इसके बाद, स्टाइल एट्रिब्यूट में प्रॉपर्टी और वैल्यू डिफाइन किया गया है। इसे इनलाइन स्टाइल शीट कहा जाता है।
    <html>
    
    <head>
    <title>Inline CSS Demo</title>
    </head>
    
    <body style="background-color:red">
    <p>This is inline CSS Demo</p>
    </body>
    
    </html>
  2. Internal Style Sheet:- इंटरनल स्टाइल शीट में, आप टैग के अंदर स्टाइल्स को डिफाइन नहीं करते हैं। <Style> टैग को हेड सेक्शन में डिफाइन किया जाता है। इसके बाद, सिलेक्टर्स (Selectors) का उपयोग करके, आप स्टाइल्स को डिफाइन करते हैं। इसमें एचटीएमएल कोड और सीएसएस कोड को एक ही डॉक्यूमेंट में डिफाइन किया जाता है।
    <html>
    
    <head>
    
    <title>Internal Style Demo</title>
    
    <style>
    body{
    background-color:red;
    }
    </style>
    
    </head>
    
    <body>
    <p>This is internal style sheet</p>
    </body>
    
    </html>
  3. External Style Sheet:- एक्सटर्नल स्टाइल शीट के संदर्भ में सीएसएस किसी भी अन्य फाइल से लिंक होती है। वह फ़ाइल HTML फ़ाइल से <link> टैग से जुड़ी हुई होती है। एक्सटर्नल स्टाइल शीट से आपको बार-बार सीएसएस कोड लिखने की आवश्यकता नहीं होती है। आप एक ही सीएसएस फ़ाइल को कई एचटीएमएल फाइलों से लिंक कर सकते हैं। इसका एक उदाहरण नीचे दिया गया है।
    <html>
    
    <head>
    
    <title>External Style Demo</title>
    
    <link rel="stylesheet" type="text/css" href="externalDemo.css">
    
    </head>
    
    <body>
    <p> This is external stylesheet</p>
    </body>
    
    </html>

    External Demo.css File

    body{
    background-color:blue;
    }
सीएसएस संस्करण का इतिहास (History of CSS Version)
  • 2.2.1 CSS 1
  • 2.2.2 CSS 2
  • 2.2.3 CSS 2.1
  • 2.2.4 CSS 3
  • 2.2.5 CSS 4
सीएसएस की विशेषताएं (Features of CSS in Hindi)

[adinserter block=”4″]

  • CSS Animations and Transitions:- सीएसएस में, आप एनीमेशन और ट्रांजीशन का उपयोग कर सकते और अपने वेब पेज को सुंदर और आकर्षक बना सकते हैं।
  • CSS Save Lots of Time:- सीएसएस का सबसे बड़ी खासियत यह है कि सीएसएस का उपयोग करके आप बहुत समय बचा सकते हैं। आपने यह भी देखा होगा कि वेबसाइट 2-3 पेज या 1000 पृष्ठों का है, प्रत्येक पृष्ठ देखने और डिजाइन में एक समान होती है और आप एक ही सीएसएस फ़ाइल का उपयोग कई HTML पृष्ठों पर कर सकते हैं।
  • Pages Load Faster:- यदि आप सीएसएस का उपयोग करते हैं, तो आपको HTML एलेमेंट्स को स्टाइल देने के लिए प्रत्येक टैग में एट्रिब्यूट लगाने की आवश्यकता नहीं है। यदि आप किसी भी एचटीएमएल एलेमेंट्स को एक ही स्टाइल देना चाहते हैं, तो आप आसानी से उन्हें एक सीएसएस फ़ाइल में एक साथ स्टाइल दे सकते हैं, इस प्रकार आपका एचटीएमएल कोड कम हो जाता है और आपका वेब पेज तेजी से लोड हो जाता है।
  • Easy Maintenance:- जैसा कि हमने ऊपर पढ़ा है की आप एक ही स्टाइल शीट का उपयोग कई वेब पृष्ठों पर कर सकते हैं, इसलिए यदि आप कभी भी अपने सभी वेब पृष्ठों के डिज़ाइन को बदलना चाहते हैं, तो आपको उसी फ़ाइल में कुछ कोड लाइनों को अपडेट करना होगा और फिर आपकी पूरी वेबसाइट का डिजाईन स्वचालित रूप से अपडेट हो जाएंगे।
  • Multiple Device Compatibility:- आज मार्केट में, रेस्पोंसिव डिजाईन चल रहा है, यदि आपकी वेबसाइट रेस्पोंसिव नहीं है, तो उपयोगकर्ता के दृष्टिकोण में वेबसाइट सही नहीं है। सीएसएस एचटीएमएल दस्तावेज़ को एक से अधिक प्रकार के डिवाइस या मीडिया के लिए अनुकूलित करने की अनुमति भी दे सकता। सीएसएस का उपयोग कर आप एक बहुत अच्छा रेस्पोंसिव डिज़ाइन बना सकते हैं, जो आपकी वेबसाइट को विभिन्न प्रकार के उपकरणों जैसे कि मोबाइल, टैबलेट, लैपटॉप, डेस्कटॉप, प्रिंटर इत्यादि के लिए विभिन्न स्टाइल में प्रस्तुत किया जा सकता है।
CSS का उपयोग (Use of CSS in Hindi)

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

[Noteसीएसएस सीखने के लिए, आपको दो चीजों की आवश्यकता होती है: पहला टेक्स्ट एडिटर (Text Editor) और दूसरा वेब ब्राउज़र (Web Browser) होता है, टेक्स्ट-एडिटर जैसे नोटपैड या नोटपैड++ का उपयोग कर सकते हैं और वेब ब्राउज़र जैसे गूगल क्रोम, मोज़िला फ़ायरफ़ॉक्स  या इंटरनेट एक्सप्लोरर का उपयोग कर सीएसएस सीख सकते हैं।]

इन्हें भी देखें –

प्रिय पाठकों, मै आशा करता हूँ की आपको हमारी ‘सीएसएस क्या है? कैसे सीखे? (What is CSS in Hindi)’ पर यह पोस्ट बहुत पसंद आया होगा। अगर आपको यह पोस्ट अच्छा लगा हो तो इसे जरुर अपने दोस्तों के साथ शेयर करे। हमने कोशिस किया है की सीएसएस क्या है? कैसे सीखे? (What is CSS in Hindi) की संपूर्ण जानकारी आसान और विस्तृत रूप में वर्णन कर सके। यदि आपको और अधिक जानकारी की आवश्यकता है तो आप यहाँ क्लिक कर पढ़ सकते है, अगर आपको कोई भी उलझन हो तो निचे कमेंट कर सूचित करें, आपको तुरंत सही और सटीक सुचना आपके इच्छित विषय से सम्बंधित दी जाएगी. यदि आप हमसे सम्पर्क करना चाहते है या आपके पास कोई सुझाव है तो आप हमसे संपर्क करे। हम आपके सुझाव का स्वागत करते हैं, हमारी यूट्यूब चैनल देखने के लिए यहाँ क्लिक करे

कृपया ध्यान दें: नीचे दिए गये “Register Now” बटन के माध्यम से आप हमे निशुल्क ज्वाइन कर सकते हैं। नवीनतम जॉब अपडेट पाने के लिए आप हमारे फेसबुक ग्रुप को जॉइन कर सकते हैं और हमारे एंड्रॉइड एप्प को भी डाउनलोड कर सकते हैं। हमारे इस एप्प का उद्देश्य प्रतियोगता परीक्षाओं की तयारी करने वाले छात्रों को नवीन माध्यम द्वारा ज्ञान उपलब्ध करवाना है। जिससे वह अपने मोबाइल द्वारा ही समस्त जानकारी प्राप्त कर सके, आपको हमारा यह प्रयास कैसा लगा, हमें कमेंट में जरूर बताएं।

register-button

Dear Visitors, अगर आपके पास कोई ज्ञानवर्धक जानकारी है जिससे आप लोगो के साथ बाँटना चाहते है तो हमसे संपर्क कीजिए हमें ईमेल भेजिए–[email protected] यदि पोस्ट अच्छी हुई तो हम जरूर आपके नाम के साथ उसे प्रकाशित करेंगे।

[adinserter block=”4″]
आशा है आपको ये शानदार पोस्ट पसंद आई होगी।
इसे अपने दोस्तों के साथ शेयर करना न भूलें, Sharing Button पोस्ट के निचे है।

Shivam Pandey is a Software Engineer and a Professional Blogger. He is "CCNA", "MCSE" & "RHCE" certified and is currently working as a Full Stack Java Developer at Tata Consultancy Services Limited (TCS).

Leave a Comment