CSS क्या है और इसका उपयोग कैसे करें | What is CSS in Hindi

CSS in Hindi | सीएसएस हिंदी में

सीएसएस (Cascading Style Sheets) वेब डिज़ाइन में एक महत्वपूर्ण भूमिका निभाती है। इसका उपयोग किसी वेब पेज को फॉर्मेट करने और उसे सुंदर दिखाने के लिए किया जाता है।

इस लेख में हम सीखेंगे कि सीएसएस क्या है, इसका महत्व क्या है और हम इसका उपयोग कैसे कर सकते हैं।

  1. सीएसएस का मतलब कैस्केडिंग स्टाइल शीट है।
  2. सीएसएस का उपयोग HTML टैग्स को डिज़ाइन करने के लिए किया जाता है।
  3. सीएसएस वेब पर व्यापक रूप से उपयोग की जाने वाली भाषा है।
  4. वेब डिजाइनिंग के लिए HTML, CSS और JavaScript का उपयोग किया जाता है। यह वेब डिज़ाइनरों को HTML टैग्स पर स्टाइल लागू करने में मदद करता है।

CSS क्या होता है | What is CSS in hindi?

What is CSS
CSS

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

सीएसएस (कैस्केडिंग स्टाइल शीट्स) एक तकनीकी भाषा है जिसका उपयोग वेब पेजों को सुंदर, देशी और वैयक्तिकृत बनाने के लिए किया जाता है। सीएसएस का मुख्य उद्देश्य वेब पेज की शैली और स्वरूप को परिभाषित करना है, जैसे:

1. फ़ॉन्ट्स: सीएसएस की मदद से आप टेक्स्ट के फ़ॉन्ट, आकार और शैली को परिभाषित कर सकते हैं। यह आपको अपने वेब पेजों के टेक्स्ट को अनुकूलित करने की अनुमति देता है।

2. रंग: आप वेब पेज की पृष्ठभूमि, पाठ और अन्य तत्वों के रंगों को परिभाषित कर सकते हैं। यह अलग-अलग हिस्सों को अलग-अलग रंगों में हाइलाइट करने और चित्रित करने में मदद करता है।

3. विशेष शैलियाँ: सीएसएस आपको विभिन्न शैलियों को परिभाषित करने की स्वतंत्रता देता है, जैसे बॉर्डर, पैडिंग, मार्जिन, राउंडिंग, आदि।

4. लेआउट: आप वेब पेज के लेआउट को समायोजित कर सकते हैं, जैसे पेज की चौड़ाई, ऊंचाई और स्थिति।

5. दृश्य प्रभाव: सीएसएस आपको विभिन्न दृश्य प्रभाव बनाने की अनुमति देता है जैसे होवर (जब माउस को किसी तत्व पर रखा जाता है), संक्रमण और एनिमेशन।

आइए इसे एक उदाहरण से समझें What is CSS in hindi : यदि आप एक वेब पेज पर हैं और वहां एक टेक्स्ट पैराग्राफ है, तो सीएसएस आपको इस पैराग्राफ के फ़ॉन्ट को ‘टाइम्स न्यू रोमन’ से ‘एरियल’, इसका रंग ‘ब्लू’ में बदलने की आजादी देता है। . ‘ से ‘हरा’, और इसकी चौड़ाई और ऊंचाई को समायोजित करने की अनुमति देता है।

सीएसएस का महत्व यह है कि यह किसी वेबसाइट के दिखने के तरीके को परिभाषित करने का एक मानक तरीका प्रदान करता है, जिससे वेब डिजाइनरों और डेवलपर्स को वेबसाइट को उसी तरह दिखाने की अनुमति मिलती है, और उपयोगकर्ताओं को एक सुंदर और व्यवस्थित अनुभव प्रदान होता है।

सीएसएस का उपयोग क्यों करें? | Why use CSS

सीएसएस के ये तीन प्रमुख लाभ हैं:

  1. एक बड़ी समस्या का समाधान हो जाता है.
  2. समय की बहुत बचत होती है.
  3. अधिक विशेषताएँ प्रदान करें.

CSS का इतिहास | CSS History in hindi

1) CSS का जन्म
सीएसएस का जन्म 1996 में हुआ था। उस समय, वेब पेजों को स्टाइल करने के लिए HTML टैग्स का उपयोग किया जाता था, जिससे वेब पेजों के डिज़ाइन को स्टाइल करना बहुत मुश्किल हो जाता था। इस समस्या को हल करने के लिए, टिम बर्नर्स-ली ने सीएसएस विकसित किया, जिसने वेब पेजों के आकर्षण और सुंदरता में सुधार किया।

2) CSS1 (1996)
CSS1 प्रथम स्तर का संस्करण था, जिसे 1996 में जारी किया गया था। इसमें फ़ॉन्ट, रंग, पृष्ठभूमि और टेक्स्ट प्लेसमेंट जैसे बुनियादी स्टाइलिंग गुण थे।

3) CSS2 (1998)
1998 में, CSS2 को और भी बड़े और अधिक शक्तिशाली स्टाइलिंग फीचर्स, जैसे बॉक्स मॉडल, प्राथमिकता और पेज पोजिशनिंग के साथ जारी किया गया था। इससे वेब डिज़ाइनरों को अधिक नियंत्रण मिला और वेबसाइटों को अधिक आकर्षक बनाने में मदद मिली।

4) CSS3 (2001-वर्तमान)
CSS3 सबसे अनोखा और व्यापक स्तर है और 2001 से विकास में है। CSS3 में कई नई और विशेष शैलियाँ, एनिमेशन, ग्रेडिएंट और अन्य विशेषताएं हैं जो वेब डिज़ाइन को बढ़ाती हैं। यह इस बात का उदाहरण है कि अब आप वेब पेज पर बेहतरीन ट्रांज़िशन, फ़ॉन्ट, ग्रेडिएंट और अन्य स्टाइलिंग सुविधाओं का उपयोग कैसे कर सकते हैं, जिससे उपयोगकर्ताओं को बेहतर अनुभव मिल सके।

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

CSS क्यों महत्वपूर्ण है | Why is CSS important

सीएसएस (कैस्केडिंग स्टाइल शीट्स) वेब डिज़ाइन में एक महत्वपूर्ण भूमिका निभाता है और विभिन्न कारणों से महत्वपूर्ण है:

1. दृश्यता बढ़ाता है:

स्थानीय और आकर्षक स्वरूप: सीएसएस वेब पेजों को स्थानीय और आकर्षक बनाता है। आप टेक्स्ट, छवियों, पृष्ठभूमि और अन्य वेब तत्वों की शैली को परिभाषित करके अपने पेज को बेहतर बना सकते हैं जो उपयोगकर्ताओं को आकर्षित करने में मदद करते हैं।
सामग्री संरचना: सीएसएस किसी वेबसाइट की सामग्री को संरचित करने में मदद करता है, जिससे उपयोगकर्ता के लिए सामग्री को पढ़ना और समझना आसान हो जाता है।

2. पेज स्पीड बढ़ाता है:

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

3. प्रौद्योगिकी संगठन करता है:

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

4. प्राथमिकताएँ और ब्राउज़िंग अनुभव:

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

क्रॉस-ब्राउज़िंग अनुकूलता: सीएसएस किसी वेबसाइट की क्रॉस-ब्राउज़िंग अनुकूलता सुनिश्चित करने में मदद करता है, जिससे वेबसाइट के उपयोगकर्ताओं को अधिक भिन्न ब्राउज़रों तक पहुंचने की अनुमति मिलती है।

5. सुरक्षा और सीओ अनुकूलित:

सुरक्षा: सीएसएस का उपयोग वेबसाइट सुरक्षा में मदद करता है, क्योंकि यह स्टाइल को शानदार तरीके से लागू करने की अनुमति देता है और अमान्य कोड से बचाता है।

सीओ अनुकूलित: सीएसएस का उपयोग सामग्री को सीओ (खोज इंजन अनुकूलन) अनुकूलित बनाने में मदद करता है, जिससे वेबसाइट को खोज इंजन में अधिक दृश्यमान होने का मौका मिलता है।

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

CSS के प्रकार | Types of CSS in Hindi 

types_of _css

Types of CSS, जैसा कि इसका पूरा नाम कैस्केडिंग स्टाइल शीट्स है, इसमें विभिन्न प्रकार होते हैं जिनका उपयोग वेब डिज़ाइन में शैली को परिभाषित करने के लिए किया जाता है। सीएसएस के कुछ मुख्य प्रकार निम्नलिखित हैं: 

1.इंलाइन CSS (Inline CSS)

परिभाषा: इनलाइन सीएसएस का मतलब है कि आप उस तत्व में सीधे शैली जोड़ने के लिए किसी विशिष्ट तत्व की “शैली” विशेषता का उपयोग करते हैं।
उपयोग: इसका उपयोग अक्सर किसी एकल तत्व के लिए विशिष्ट शैली सेट करने के लिए किया जाता है, आमतौर पर व्यावसायिक उद्देश्यों के लिए।

<p style=”color: blue; font-size: 16px;”>यह टेक्स्ट इंलाइन सीएसएसका उपयोग करके रंगीन और छोटे फॉन्ट के साथ है।</p>

2. इंटरनल CSS (Internal CSS):

परिभाषा: आंतरिक सीएसएस को HTML दस्तावेज़ के <style> टैग के भीतर परिभाषित किया गया है। इसका मतलब है कि आप संपूर्ण HTML पृष्ठ के लिए शैली सेट कर सकते हैं।
उपयोग: आंतरिक सीएसएस का उपयोग उपयोगकर्ता द्वारा ब्राउज़ किए जाने वाले सभी पृष्ठों पर समान शैली लागू करने के लिए किया जाता है।

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>यह टेक्स्ट इंटरनल सीएसएस का उपयोग करके शैली निर्धारित करता है।</p>
</body>
</html>

3. एक्सटर्नल CSS (External CSS):

परिभाषा: बाहरी सीएसएस को एक अलग .css फ़ाइल में परिभाषित किया गया है, और HTML पृष्ठ की <link> विशेषता के माध्यम से शामिल किया गया है।
उपयोग: किसी वेबसाइट के सभी पृष्ठों के लिए एक संयुक्त शैली प्रदान करने के लिए बाहरी सीएसएस का उपयोग किया जाता है, जो वेबसाइट के डिज़ाइन को सुसंगत और अच्छा बनाता है।

<!– एक्सटर्नल CSS फ़ाइल (styles.css) –>
p {
color: blue;
font-size: 16px;
}

<!– HTML पेज में एक्सटर्नल CSS फ़ाइल को शामिल करने का उदाहरण –>
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<p>यह टेक्स्ट एक्सटर्नल सीएसएस का उपयोग करके शैली निर्धारित करता है।</p>
</body>
</html>

CSS की सिंटैक्स | CSS Syntax क्या है

आइये इसे विस्तार से समझाते हैं. सीएसएस का मुख्य उद्देश्य वेब पेजों की स्टाइलिंग और लेआउट को नियंत्रित करना है और यह स्टाइल शीट के माध्यम से किया जाता है। सीएसएस सिंटैक्स का उपयोग करके आप वेब पेजों के प्रत्येक तत्व की शैली निर्धारित कर सकते हैं।

सीएसएस नियम का सिंटैक्स इस प्रकार है:

selector {
property: value;
}

यहां, हमारे पास इस वाक्यविन्यास के तीन मुख्य भाग हैं:

1) चयनकर्ता (Selector): सेलेक्टर का उपयोग वेब पेज के किसी तत्व का चयन करने के लिए किया जाता है। आप विशिष्ट तत्वों, जैसे तत्व नाम, तर्क, वर्ग और आईडी का चयन करने के लिए विभिन्न चयनकर्ताओं का उपयोग कर सकते हैं।

2) प्रॉपर्टी(Property): प्रॉपर्टी का उपयोग चयनित तत्व की एक विशेष विशेषता निर्धारित करने के लिए किया जाता है। आप रंग, फ़ॉन्ट आकार और मार्जिन जैसे विभिन्न गुणों का उपयोग करके किसी तत्व की शैली को परिभाषित कर सकते हैं।

3) मूल्य(Value): मूल्य संपत्ति के लिए निर्धारित विशेषता के मूल्य का प्रतिनिधित्व करता है। मूल्य का आकार संपत्ति के प्रकार के आधार पर भिन्न हो सकता है, जैसे रंग के लिए लाल, #FF0000, या rgb(255, 0, 0)

CSS सेलेक्टर | Selector क्या होता है?

सीएसएस चयनकर्ता एक स्टाइल शीट (CSS) नियम का हिस्सा है जिसका उपयोग वेब पेज पर तत्वों का चयन करने के लिए किया जाता है। चयनकर्ता का मुख्य कार्य उस तत्व या तत्वों का चयन करना है जिन्हें आप स्टाइल करना चाहते हैं, और फिर उन्हें सीएसएस शैली नियमों के साथ हेरफेर करना है।

चयनकर्ता सिंटैक्स (Selector Syntax):

सीएसएस चयनकर्ता की सामान्य संरचना इस प्रकार है:

selector {
property: value;
}

चयनकर्ता (selector) : चयनकर्ता का उपयोग विशिष्ट प्रकार के तत्वों का चयन करने के लिए किया जाता है। इस तत्व को टैग नाम, वर्ग, आईडी और HTML तत्व की अन्य विशेषताओं के आधार पर चुना जा सकता है।

संपत्ति (property) : एक संपत्ति वह विशेषता है जिसे आप चयनित तत्वों, जैसे color, font-size, margin इत्यादि के लिए सेट करना चाहते हैं।

मूल्य (value) : मूल्य संपत्ति के लिए निर्धारित मूल्य है, जैसे लाल, 16px, 10px 20px, आदि।

कार्य (Types of Selectors)

सीएसएस में कई प्रकार के चयनकर्ता होते हैं, जिनमें से कुछ मुख्य हैं:

1) टैग चयनकर्ता (Tag Selector): इस चयनकर्ता का उपयोग किसी विशिष्ट टैग (जैसे <p>, <h1>) के लिए किया जाता है। यह सभी समान टैग पर शैलियाँ लागू करने के लिए उपयोगी है।

उदाहरण:

p {
font-size: 16px;
}

2) क्लास चयनकर्ता (Class Selector): इस चयनकर्ता का उपयोग एक विशिष्ट वर्ग (जैसे .button, .header) के लिए किया जाता है। यह किसी विशेष वर्ग के सभी तत्वों पर स्टाइल लागू करने के लिए उपयोगी है।

उदाहरण:

.button {
background-color: #3498db;
}

3) आईडी चयनकर्ता (ID Selector): इस चयनकर्ता का उपयोग एक विशिष्ट आईडी (जैसे #हेडर, #सामग्री) के लिए किया जाता है। आईडी चयनकर्ता का उद्देश्य केवल एक तत्व का चयन करना है, और एक ही आईडी वेब पेज पर केवल एक बार हो सकती है।

उदाहरण:

#header {
border-bottom: 1px solid #ccc;
}

4) यूनिवर्सल चयनकर्ता (Universal Selector): इस चयनकर्ता का उपयोग सभी तत्वों के लिए किया जाता है। यह सभी तत्वों पर स्टाइल लागू करने के लिए उपयोगी हो सकता है लेकिन इसका उपयोग सावधानी से किया जाना चाहिए क्योंकि यह वेब पेज के प्रदर्शन को प्रभावित कर सकता है।

उदाहरण:

* {
margin: 0;
padding: 0;
}

5) संयोजन चयनकर्ता (Combination Selector): इस चयनकर्ता में, आप एक से अधिक चयनकर्ताओं को अल्पविराम के साथ जोड़ सकते हैं, ताकि आप उन सभी तत्वों का चयन कर सकें जो किसी एक चयनकर्ता से सहमत हों।

उदाहरण:

h1, h2, h3 {
font-family: ‘Arial’, sans-serif;
}

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

CSS के उपयोग | 5 Application’s of CSS in Hindi

1. वेबसाइट डिज़ाइन:
परिभाषा: सीएसएस का सबसे महत्वपूर्ण अनुप्रयोग वेबसाइट डिज़ाइन में है। यह वेब पेजों को सुंदर और आकर्षक दिखाने के तरीके को डिजाइन करने और बनाने में मदद करता है।

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

2. मोबाइल और रिस्पॉन्सिव डिज़ाइन:
परिभाषा: सीएसएस का उपयोग मोबाइल उपकरणों के लिए किसी वेबसाइट को अनुकूलित करने के लिए भी किया जाता है ताकि वेबसाइट सभी उपकरणों पर सही दिखे।

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

3. वेबसाइट प्रदर्शन अनुकूलन:
परिभाषा: सीएसएस का उपयोग किसी वेबसाइट की गति को तेज करने में मदद करता है, क्योंकि यह वेब पेज के लोडिंग समय को कम कर सकता है।

उपयोग: सीएसएस का उपयोग सीएसएस कैशिंग, सीएसएस लघुकरण और सीएसएस को दस्तावेज़ शीर्षकों के साथ संयोजित करने के लिए किया जाता है, जिससे वेबसाइट के प्रदर्शन की गति में सुधार होता है।

4. प्रिंट शैलियाँ:
परिभाषा: सीएसएस का उपयोग प्रिंट शैलियाँ बनाने के लिए किया जाता है जो मुद्रित होने पर वेब पेजों को बेहतर बनाती हैं।

उपयोग: सीएसएस का उपयोग सीएसएस मीडिया प्रॉपर्टी का उपयोग करके किसी वेबसाइट के लिए प्रिंट शैलियों को परिभाषित करने के लिए किया जाता है, जो मुद्रित डिजाइन में सुधार करता है।

5. एनिमेशन और बदलाव:
परिभाषा: सीएसएस का उपयोग किसी वेबसाइट पर एनिमेशन और ट्रांज़िशन जोड़ने के लिए किया जाता है, जिससे उपयोगकर्ताओं को किसी गतिविधि का अनुभव करने में मदद मिलती है।

उपयोग: सीएसएस एनीमेशन और ट्रांज़िशन गुणों का उपयोग करके आप किसी वेबसाइट पर छवियों, पैराग्राफ और अन्य तत्वों को एनिमेट कर सकते हैं, जो वेबसाइट की तारीख और विशेष रूप से वाणिज्यिक बनाता है।

CSS के फायदे | Advantages of CSS in Hindi

1. यह कम जटील complex भाषा है।

2.यह भाषा वेबसाइट की स्पीड को improve करती है।

3.सीएसएस वेबसाइट को यूजर फ्रेंडली बनाने में मदद करता है।

4.सीएसएस में कई सारे properties और उसकी values का collection है | जिससे वेबसाइट को मनचाही खूबसूरती दी जा सकती है |

5.सीएसएस से समय बहुत बचाता है

6.आकर्षक वेबसाइट आसानी से क्रिएट कर सकते है

CSS के नुकसान | Disadvantages of CSS in Hindi

1. क्रॉस-ब्राउज़िंग संगतता:
परिभाषा: सीएसएस के एक ही कोड का समर्थन अलग-अलग वेब ब्राउज़र में भिन्न हो सकता है, जिससे क्रॉस-ब्राउज़िंग संगतता समस्याएं पैदा हो सकती हैं।

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

2. लोडिंग समय:
परिभाषा: बड़ी और तटस्थ सीएसएस फ़ाइलें किसी वेब पेज के लोडिंग समय को बढ़ा सकती हैं, खासकर जब वे ब्राउज़र को अधिक डेटा डाउनलोड करने के लिए निर्देशित करती हैं।

नुकसान: लंबे समय तक लोड होने से उपयोगकर्ताओं को डिज़ाइन में असंबद्ध और महत्वहीन महसूस हो सकता है, जिससे वेबसाइट का प्रदर्शन कम हो जाता है।

3. सीएसएस संपत्ति प्रबंधन:
परिभाषा: बड़ी और विशिष्ट वेबसाइटों में, विभिन्न प्रकार की सीएसएस संपत्तियों को व्यवस्थित करने में कठिनाइयाँ उत्पन्न हो सकती हैं, खासकर जब उन्हें टीम के सदस्यों के बीच साझा किया जाता है।

नुकसान: सीएसएस संपत्तियों को प्रबंधित करने में कठिनाइयाँ डेवलपर्स के लिए व्यवस्थित तरीके से काम करना मुश्किल बना सकती हैं, जिससे गलतियाँ और प्रदर्शन संबंधी समस्याएं हो सकती हैं।

4. जटिल सीएसएस नियम:
परिभाषा: बड़ी और जटिल वेबसाइटों में, सीएसएस नियम जटिल हो सकते हैं, जिससे कोड को पढ़ना और बग ढूंढना मुश्किल हो सकता है।

नुकसान: वेब डेवलपर्स को वेबसाइट के इंटरैक्शन को ठीक से समझने में समय लगता है, और उन्हें कोड की सुरक्षा के बारे में चिंता करनी पड़ सकती है।

5. वेब पेज का आइडिया (पेज रेंडरिंग):
परिभाषा: कभी-कभी, अत्यधिक और तटस्थ सीएसएस कोड वेब पेज के रेंडरिंग में समस्या पैदा कर सकता है, जिससे पेज की दिशा, तारीख या फ़ॉर्मेटिंग में समस्या हो सकती है।

नुकसान: इससे वेब पेज को ठीक से प्रस्तुत करने में समस्या हो सकती है, और वेबसाइट का प्रदर्शन ख़राब हो सकता है, जिससे उपयोगकर्ताओं को असुविधा हो सकती है।

CSS मीडिया Query in Hindi

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

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

मीडिया query स्थान

मीडियम क्वेरी को सीएसएस फ़ाइल के अंत में <style> ब्लॉक के भीतर या HTML दस्तावेज़ के <head> अनुभाग के अंदर परिभाषित किया जा सकता है।

सिंटैक्स

सामान्य वाक्यविन्यास इस प्रकार है:

@media media-type and (media-feature) {
/* CSS स्टाइल नियम */
}

मीडिया-प्रकार (media-type) : मीडिया क्वेरी का प्रकार, जैसे screen, प्रिंट, all, आदि।
मीडिया-फ़ीचर (media-feature): मीडिया फ़ीचर विशेषताएँ, जैसे max-width, min-width, orientation, आदि।
उदाहरण 

आइए सीएसएस मीडिया क्वेरी को एक उदाहरण के माध्यम से समझें:

/* डेस्कटॉप स्क्रीन्स के लिए स्टाइल */
@media screen and (min-width: 768px) {
body {
font-size: 18px;
background-color: #f0f0f0;
}
}

/* मोबाइल स्क्रीन्स के लिए स्टाइल */
@media screen and (max-width: 767px) {
body {
font-size: 16px;
background-color: #ffffff;
}
}

इस उदाहरण में, हमने दो मीडिया क्वेरीज़ बनाई हैं:

1) @media screen and (min-width: 768px): यह मीडिया क्वेरी हमें निम्नलिखित सीएसएस शैली नियमों को लागू करने के लिए कहती है यदि डिवाइस का मीडिया प्रकार screen है और डिवाइस की न्यूनतम चौड़ाई 768 पिक्सेल से अधिक है।
2) @media screen and (max-width: 767px): यह मीडिया क्वेरी हमें निम्नलिखित सीएसएस शैली नियमों को लागू करने के लिए कहती है यदि डिवाइस का मीडिया प्रकार screen है और डिवाइस की न्यूनतम चौड़ाई 767 पिक्सेल से कम है।

इसका मतलब यह है कि डेस्कटॉप स्क्रीन पर फ़ॉन्ट का आकार बड़ा और पृष्ठभूमि का रंग ग्रे होगा, जबकि मोबाइल स्क्रीन पर फ़ॉन्ट का आकार छोटा और पृष्ठभूमि का रंग सफेद होगा।

इस तरह, सीएसएस मीडिया क्वेरीज़ का उपयोग विभिन्न मीडिया उपकरणों में वेब पेज के डिज़ाइन का सुझाव देने और समायोजित करने के लिए किया जा सकता है, जिससे उपयोगकर्ताओं को एक अनुकूलित अनुभव प्राप्त हो सकता है।

CSS और HTML में अंतर | Difference between HTML and CSS

विशेषताCSS (Cascading Style Sheets)HTML (HyperText Markup Language)
पूरा नामवर्ष 1996 में बनाया गया, वेब पेज्स की शैली को नियंत्रित करने के लिए।वर्ष 1993 में बनाया गया, वेब पेज्स की संरचना को परिभाषित करने के लिए।
उद्देश्यवेब पेज्स की शैली और रूपरेखा को परिभाषित करना।वेब पेज्स की संरचना और सामग्री को परिभाषित करना।
क्या करता हैस्टाइलिंग, रंग, फ़ॉन्ट, माप, और अन्य दृश्य विशेषताएँ निर्धारित करता है।संरचना, शीर्षक, पाठ, लिंक, छवियों, और अन्य सामग्री को प्रदर्शित करता है।
उपयोगकर्ता-मित्रवेब डिज़ाइनर्स और वेब डेवलपर्स।वेब डेवलपर्स, ब्लॉगर्स, और सामान्य उपयोगकर्ताएँ।
प्रकारशैली शीट भाषा (Style Sheet Language)चिह्नित पाठ भाषा (Markup Language)
उपयोगकर्ता-मित्रकस्केडिंग (Cascading) शैली दी जाती है, जिससे रूपरेखा की प्राथमिकता और प्राथमिकता के आधार पर आवेदन की जा सकती है।ब्राउज़र द्वारा वेब पेज को पढ़कर प्रदर्शित किया जाता है।
उदाहरणसीएसएस का उपयोग करके वेब पेज्स की फ़ॉर्मैटिंग करने के लिए, जैसे कि रंग, फ़ॉन्ट, और माप।HTML का उपयोग करके वेब पेज्स की संरचना परिभाषित करने के लिए, जैसे कि हैडिंग, पैराग्राफ, और लिंक।

FAQ’s पूछे जाने वाले प्रश्न

1) सीएसएस क्या है?

उत्तर: CSS (Cascading Style Sheets) एक वेब डिज़ाइन और पेज आउटलाइन भाषा है जिसका उपयोग वेब पेजों की उपस्थिति और स्टाइल को परिभाषित करने के लिए किया जाता है।

2) सीएसएस कैसे काम करता है?

उत्तर: सीएसएस एक वेब पेज के HTML तत्वों का चयन करता है और उन्हें शैली और उपस्थिति की जानकारी प्रदान करता है, जिससे वेब पेज की शैली निर्धारित होती है।

3) सीएसएस चयनकर्ता क्या हैं?

उत्तर: सीएसएस चयनकर्ताओं का उपयोग वेब पेज के तत्वों का चयन करने के लिए किया जाता है, जिससे आप उन्हें स्टाइल कर सकते हैं। चयनकर्ताओं का उपयोग टैग, श्रेणी, आईडी और अन्य विशेषताओं के आधार पर किया जा सकता है।

4) सीएसएस फ़ाइल कैसे जोड़ें?

उत्तर: सीएसएस फ़ाइल को <link> टैग का उपयोग करके HTML दस्तावेज़ में जोड़ा जा सकता है।

5) सीएसएस कितने प्रकार के होते हैं?

उत्तर: सीएसएस में तीन प्रकार की स्टाइलिंग होती है: इनलाइन सीएसएस , इंटरनल सीएसएस और एक्सटर्नल सीएसएस।

इसे भी पढ़ें –  HTML क्या है उसकी पूरी जानकारी 

1 thought on “CSS क्या है और इसका उपयोग कैसे करें | What is CSS in Hindi”

Leave a Comment