HTML in Hindi - How to Use Cascading Style Sheets (CSS)
एचटीएमएल में कैस्केडिंग स्टाइल शीट (CSS) का प्रयोग कैसे करें?

कैस्केडिंग स्टाइल शीट (CSS) क्या हैं?
What is Cascading Style Sheet (CSS)?

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

कैस्केडिंग स्टाइल शीट (CSS) के उपयोग
Uses of Cascading Style Sheet (CSS)

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

स्टाइलिंग (Styling) :

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

लेआउट (Layout) :

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

रिस्पॉन्सिव डिज़ाइन (Responsive Design):

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

ट्रांजिशन एवं एनिमेशन्स (Transitions and Animations):

कैस्केडिंग स्टाइल शीट (CSS) के द्वारा वेब पेज पर विभिन्न और ट्रांजिशन एवं एनिमेशन्स इफेक्ट के अलावा इंटरऐक्टिव एलिमेंट्स को डिजाइन करने की सुविधा भी प्राप्त होती है।

मॉड्यूलरिटी (Modularity):

कैस्केडिंग स्टाइल शीट (CSS) में विभिन्न स्टाइल्स को अलग-अलग CSS फ़ाइलों में ऑर्गनाइज़ किया जा कसता है, जिससे उन्हें कहीं भी प्रयोग किया जा सके।

बॉक्स मॉडल (Box Model) :

कैस्केडिंग स्टाइल शीट (CSS) में बॉक्स मॉडल का उपयोग किया जाता है, जिसमें प्रत्येक HTML एलीमेंट को एक आयताकार बॉक्स के रूप में डिफाइन किया जाता है। इसमें कंटेंट, पैडिंग, बॉर्डर और मार्जिन आदि शामिल होते हैं।

लोकल एवं सर्वर साइड कैशिंग (Local & Server Side Caching ):

एक्सटर्नल CSS फ़ाइलों को लोकल और सर्वर साइड कैशिंग का उपयोग करके वेब पेज की लोडिंग स्पीड को बढ़ाता जा सकता है, क्योंकि ब्राउज़र उन्हें कैश (cache) कर सकता है, जिससे वे तेजी से लोड होते हैं।

यूजर एक्सपेरियंस और ब्राउज़र कम्पैटिबल (User Experience & Browser Compatibility ):

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

कैस्केडिंग स्टाइल शीट (CSS) कैसे कार्य करता है?
How Cascading Style Sheet (CSS) Works?

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

वेब ब्राउज़र द्वारा सबसे पहले एचटीएमएल कोड को सिस्टम में लोड एवं पार्स किया जाता है, उसके बाद CSS स्टाइल को लोड और पार्स करने की प्रक्रिया होती है। जब HTML और CSS स्टाइल को लोड और पार्स कर लेते हैं, तो उन्हें संयोजित (combine) करने की प्रक्रिया दो अलग-अलग चरणों में होती है। सबसे पहले, ब्राउज़र उन्हें डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) में परिवर्तित करता है। इसके बाद डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) डॉक्यूमेंट के कंटेन्ट एवं स्टाइल को जोड़ता है जीसे ब्राउज़र उस स्टाइल के साथ वेब कंटेन्ट को प्रदर्शित करता है।

कैस्केडिंग स्टाइल शीट (CSS) का एचटीएमएल में प्रयोग
Using Cascading Style Sheet (CSS) in HTML

कैस्केडिंग स्टाइल शीट (CSS) का एचटीएमएल में प्रयोग करने के लिए एक निर्धारित स्ट्रक्चर का प्रयोग किया जाता है, जिसे कैस्केडिंग स्टाइल शीट (CSS) का सिंटेक्स भी कहा जाता है।
कैस्केडिंग स्टाइल शीट (CSS) में मुख्य रूप से सिलेक्टर (Selector) एवं डिक्लरेशन (Declaration) से मिलती है। कैस्केडिंग स्टाइल शीट (CSS) का स्ट्रक्चर इस प्रकार होता है:

सिलेक्टर (Selector)

कैस्केडिंग स्टाइल शीट में CSS सिलेक्टर (Selector) के द्वारा एचटीएमएल (HTML) एलीमेंट जैसे हेडिंग, पैराग्राफ, टेबल आदि को सिलेक्ट किया जाता है। सिलेक्टर में क्लास (Class) एवं आईडी (ID) को भी प्रयोग किया जा सकता है।

डिक्लरेशन (Declaration)

कैस्केडिंग स्टाइल शीट में डिक्लरेशन को एक ब्लॉक के अंदर कर्वी ब्रेसेस {} में लिखा जाता है। इसे डिक्लरेशन बॉक्स (Declaration Block) कहा जाता है। इस ब्लॉक के अंदर एक से अधिक डिक्लरेशन को डिफाइन किया जा सकता है। प्रत्येक डिक्लरेशन में एक CSS प्रॉपर्टी जैसे color, font-size आदि एवं उसकी वैल्यू को डिफाइन किया जाता है।

प्रॉपर्टी एवं वैल्यू (Propery and Value )

कैस्केडिंग स्टाइल शीट में विभिन्न CSS प्रॉपर्टी का प्रयोग किया जा सकता है। मुख्य रूप से CSS प्रॉपर्टी जैसे “color,” “font-size,” “margin,” “padding,” “display,” “position,” “background-colour,” “border,” “text-align,” “width,” “height,” आदि का प्रयोग किया जाता है।
प्रॉपर्टी वैल्यू के अंदर उसकी वैल्यू जैसे कलर - blue, red, green, फॉन्ट साइज़ - 10px, 14px, 20px, आदि को डिफाइन किया जाता है। प्रॉपर्टी एवं वैल्यू को एक कोलन : द्वारा अलग किया जाता है।

कैस्केडिंग स्टाइल शीट (CSS) के प्रकार
Types of Cascading Style Sheet (CSS)

एचटीएमएल में कैस्केडिंग स्टाइल शीट को प्रयोग करने के आधार पर बाँटा गया है। मुख्य रूप से कैस्केडिंग स्टाइल शीट (CSS) के तीन प्रकार हैं:
 ➥ इनलाइन सीएसएस (Inline CSS)
 ➥ इंटरनल या एम्बेडेड सीएसएस (Internal or Embedded CSS)
 ➥ एक्सटर्नल सीएसएस (External CSS)

इनलाइन सीएसएस
Inline CSS

इनलाइन सीएसएस (Inline CSS) में दी जाने वाली स्टाइल को सीधे HTML टैग द्वारा प्रयोग किया जाता है। इसे "style" एट्रिब्यूट के माध्यम से लिखा जाता है। इनलाइन सीएसएस को पेज के प्रत्येक एलीमेंट के लिए अलग-अलग लिखना पड़ता है।
उदाहरण :

<p style="color: blue; font-size: 16px;">This is a paragraph. </p>

इंटरनल या एम्बेडेड सीएसएस | Internal or Embedded CSS

इंटरनल या एम्बेडेड सीएसएस (Internal or Embedded CSS) में स्टाइल को HTML टैग के साथ <style> ब्लॉक के अंदर प्रयोग किया जाता है। इसे एचटीएमएल के हेड <head> सेक्शन के अंदर डिफाइन किया जाता है। यह स्टाइल पूरे वेब पेज पर कार्य करता है।
उदाहरण :

<head>
<style>
p {
color: blue;
font-size: 16px;
}

</style>
</head>

एक्सटर्नल सीएसएस
External CSS

एक्सटर्नल सीएसएस में CSS स्टाइल को डिफाइन करके एक अलग सीएसएस फ़ाइल में सेव किया जाता है और फिर उस एचटीएमएल फ़ाइल को <link> एट्रिब्यूट का उपयोग करके प्रयोग किया जाता है। इस प्रकार से स्टाइल्स को एक से अधिक HTML पेज पर बार बार प्रयोग किया जा सकता है। उपरोक्त कोड को style.css फाइल में सेव करके उसे निम्नानुसार लिंक किया जा सकता है।
उदाहरण :

<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>

Computer Hindi Notes | Web Page Design with HTML

copaguide.com

---

---

Web Page Design HTML | Practical Exercise

copaguide.com

---

---

Online MCQ Test Series | Internet & HTML

copaguide.com

Tags - What is HTML CSS Hindi Explanation. Learn to Use CSS elements Tag, Use of CSS in HTML. Using CSS elements Text box, Check box, Radio button, Combo Box, Text Field in HTML. Using form Elements in HTML Programming. HTML Hindi Notes Using CSS. How to use CSS elements in HTML. HTML CSS Tags Practical Example. HTML form element program code. HTML Programming Creating CSS with Text box, Check box, Radio button, Combo Box, Text Field Exercise, How to Create CSS in HTML. HTML Hindi Notes। How to Create CSS in HTML In Hindi How to Create CSS in HTML. HTML Tutorial in Hindi HTML tutorial for beginners in Hindi.

CSS क्या हैं? एचटीएमएल में कैस्केडिंग स्टाइल शीट CSS का कैसे प्रयोग करें? एचटीएमएल में कैस्केडिंग स्टाइल शीट एवं उनके उपयोग। कैस्केडिंग स्टाइल शीट एलीमेंट प्रैक्टिकल उदाहरण सहित। एचटीएमएल कैस्केडिंग स्टाइल शीट की जानकारी, एचटीएमएल प्रोग्रामिंग कैस्केडिंग स्टाइल शीट एलीमेंट के उदाहरण सहित प्रोग्रामिंग कोड, HTML CSS एलीमेंट का परिचय, CSS एलीमेंट के प्रकार, HTML में CSS क्या है? HTML पेज में कैस्केडिंग स्टाइल शीट का प्रयोग कैसे करें? कैस्केडिंग स्टाइल शीट सिंटैक्स क्या है?