हेल्लो दोस्तों! आज हम इस आर्टिकल में What is CSS in Hindi (CSS क्या है और इसके फायदे) के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
What is CSS in Hindi – CSS क्या है?
CSS (Cascading Style Sheets) एक वेब डिजाइनिंग भाषा है जो एचटीएमएल (HTML) और एक्सएमएल (XML) दोनों के साथ काम करती है। CSS वेब पेजों को स्टाइल और लुक एंड फील (Look and Feel) देता है जो उपयोगकर्ताओं को वेब साइटों को संभवतः अधिक आकर्षक बनाने में मदद करता है।
CSS वेब पेज के संरचना को बदलने के लिए इस्तेमाल किए जाने वाले विभिन्न संपत्तियों को संचालित करता है, जिनमें फ़ॉन्ट, रंग, बॉर्डर, तस्वीरें, लेआउट आदि शामिल हैं। इससे वेब डिजाइनर संचार करते हुए उपयोगकर्ताओं को एक बेहतर अनुभव देने के लिए एचटीएमएल एलिमेंट्स को स्टाइल किया जाता है।
CSS उन्हें वेब डिजाइनरों के लिए एक उपयोगी भाषा बनाता है जो उन्हें स्टाइलिंग और लेआउट को संभवतः अधिक विस्तृत रूप में संचालित करने में मदद करता है।
CSS का अविष्कार किसने और कब किया ?
CSS का अविष्कार 1996 में वेब डिजाइनर Håkon Wium Lie और टिम बर्नर्स-ली (Tim Berners-Lee) द्वारा किया गया था। उन्होंने यह भाषा बनाई थी ताकि वेब पेजों को स्टाइल देने के लिए एचटीएमएल से अलग संपत्तियों का उपयोग किया जा सके। इससे वेब पेजों को स्टाइल देने के लिए पहले से ही मौजूद उपकरणों से काफी अधिक विशेषताओं को जोड़ा जा सका। CSS ने वेब डिजाइन में बदलाव लाया और वेब डिजाइन के क्षेत्र में एक महत्वपूर्ण कदम बना।
HTML में CSS को कितने तरीके से इस्तेमाल दिया जाता है?
HTML में CSS को 3 तरीके से इस्तेमाल किया जाता हैं।
- Inline CSS: इसमें एक टैग के भीतर CSS लिखा जाता है। इस तरीके से लिखे गए CSS को उस टैग के लिए ही लागू होगा। जैसे:
| <p style=”color:red;”>यह लाल रंग का पैराग्राफ है।</p> |
2.Internal CSS: इसमें <style> टैग का उपयोग करके एक विशिष्ट HTML फाइल में स्टाइल शीट लिखी जाती है। इस तरीके से लिखे गए CSS को उस HTML फाइल में स्थिर रूप से लागू किया जा सकता है। जैसे:
| <!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <p>यह लाल रंग का पैराग्राफ है।</p> </body> </html> |
3.External CSS: इसमें CSS को अलग से एक CSS फाइल में लिखा जाता है। इस तरीके से लिखे गए CSS को किसी भी HTML फाइल में लागू किया जा सकता है। जैसे:
index.html: (File Name)
| <!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <p>यह लाल रंग का पैराग्राफ है।</p> </body> </html> |
style.css : (File Name)
| p { color: red; } |
Features of CSS
1. Cascading: CSS follows a cascading style, which means that if multiple styles are applied to the same element, then the browser will apply the most specific style.
2. Selectors: CSS uses selectors to identify the HTML elements to which styles should be applied. Selectors can target specific elements, classes, IDs, attributes, and more.
3. Box model: CSS defines a box model for HTML elements, which includes properties such as padding, border, and margin. These properties can be used to control the layout and spacing of elements on a web page.
4. Responsive design: CSS can be used to create responsive designs that adapt to different screen sizes and devices, such as smartphones and tablets.
5. Modular design: CSS allows for modular design, where styles can be defined in separate style sheets and reused across multiple web pages.
6. Typography: CSS provides a wide range of typographic options, such as font size, font family, font weight, and text decoration, that can be used to enhance the visual appeal of a web page.
7. Animations and transitions: CSS allows for the creation of animations and transitions, which can add interactivity and visual interest to a web page.
8. Flexibility: CSS is highly flexible and can be used to create a wide range of styles and layouts, from simple to complex.
Application of CSS in Hindi
CSS का उपयोग वेब डिजाइन और वेब विकास में किया जाता है। कुछ मुख्य CSS का उपयोग निम्नलिखित है:
1. लेआउट बनाने के लिए: CSS का उपयोग वेब पेज के लेआउट बनाने के लिए किया जाता है। इससे वेब पेज में विभिन्न एलिमेंट्स को आसानी से अलग-अलग तरीकों से व्यवस्थित किया जा सकता है।
2. वेब पेज को सुंदर बनाने के लिए: CSS का उपयोग वेब पेज को सुंदर बनाने के लिए किया जाता है। इससे वेब पेज में विभिन्न एलिमेंट्स के रंग, आकार, फोंट आदि को संशोधित किया जा सकता है।
3. रेस्पोंसिव डिजाइन के लिए: CSS का उपयोग रेस्पोंसिव डिजाइन बनाने के लिए किया जाता है। इससे वेब पेज को अलग-अलग साइज के स्क्रीन पर ठीक से दिखाई दिया जा सकता है।
4. एनीमेशन के लिए: CSS का उपयोग एनीमेशन बनाने के लिए किया जाता है। इससे वेब पेज में विभिन्न एलिमेंट्स को गति से लेकर आकार तक को एनीमेट किया जा सकता है।
CSS सेलेक्टर्स
1. एलीमेंट सेलेक्टर: यह सबसे आम सेलेक्टर है, जो एक एलीमेंट को सेलेक्ट करता है। उदाहरण के लिए, यदि आप <p> एलीमेंट के लिए CSS स्टाइल लागू करना चाहते हैं, तो आप “p” सेलेक्टर का उपयोग कर सकते हैं।
2. क्लास सेलेक्टर: यह सेलेक्टर उन एलीमेंट को सेलेक्ट करता है जिनमें दिए गए क्लास नाम होता है। उदाहरण के लिए, यदि आप <p> एलीमेंट के लिए केवल एक विशिष्ट क्लास के एलीमेंट के लिए स्टाइल लागू करना चाहते हैं, तो आप “.classname” सेलेक्टर का उपयोग कर सकते हैं।
3. आईडी सेलेक्टर: यह सेलेक्टर एक एकल एलीमेंट को सेलेक्ट करता है जो दिए गए आईडी के साथ टैग के अंत में होता है। उदाहरण के लिए, यदि आप केवल एक विशिष्ट आईडी वाले <p> एलीमेंट के लिए स्टाइल लागू करना चाहते हैं, तो आप “#idname” सेलेक्टर का उपयोग कर सकते हैं।
CSS में बॉक्स मॉडल क्या होता है?
CSS में बॉक्स मॉडल एक तरीका है जिससे आप एक एलीमेंट के आकार, पट्टी, और अंतर को निर्धारित कर सकते हैं। इस मॉडल में, हर एलीमेंट एक रेखांकित बॉक्स के रूप में प्रदर्शित होता है जिसमें उस एलीमेंट का सामग्री होती है।
बॉक्स मॉडल में एक एलीमेंट के लिए निम्नलिखित चार मुख्य खंड होते हैं:
1. Content: एक एलीमेंट के सामग्री का विस्तार यहाँ निर्धारित होता है।
2. Padding: एक एलीमेंट के सामग्री और बॉर्डर के बीच का अंतर होता है।
3. Border: एक एलीमेंट के चारों ओर एक बॉर्डर होता है जो उसकी सीमाओं को परिभाषित करता है।
4. Margin: एक एलीमेंट के चारों ओर खाली जगह होती है, जो इसे उसके आसपास के एलीमेंट से अलग करती है।
ये चारों खंड एक साथ मिलकर एक बॉक्स को बनाते हैं जिसमें सामग्री, बॉर्डर, पैडिंग और मार्जिन शामिल होते हैं। इस बॉक्स मॉडल की मदद से आप अपनी वेबसाइट के एलीमेंट्स के आकार, स्थान और अंतर को संशोधित कर सकते हैं|
CSS से Exam में पूछे जाने वाले प्रश्न ?
1. CSS क्या है? इसका उपयोग वेब डिजाइन में कैसे किया जाता है?
2. CSS के कुछ मुख्य features कौन से हैं?
3. CSS के लिए कौन-कौन से सेलेक्टर्स होते हैं और उनका उपयोग कैसे किया जाता है?
4. CSS में क्लास और आईडी सेलेक्टर का उपयोग कैसे किया जाता है?
5. CSS में प्रयोग की जाने वाली प्रमुख प्रोपर्टीज कौन सी होती हैं और उनका उपयोग कैसे किया जाता है?
6. CSS में क्लासेज का उपयोग क्यों किया जाता है? इसमें आईडी से क्या अंतर होता है?
7. CSS में बॉक्स मॉडल क्या होता है? इसमें मॉडल के अंग कौन-कौन से होते हैं?
8. CSS में रेस्पोंसिव डिजाइन क्या होता है और उसके लिए कौन-कौन से प्रोपर्टीज का उपयोग किया जाता है?
9. CSS में एनीमेशन क्या होता है? कुछ मुख्य एनीमेशन प्रोपर्टीज कौन-कौन सी होती हैं?
10. CSS में ब्राउज़र कंपैटिबिलिटी के बारे में बताएं। क्या हैं इसके समस्याएं और उनका हल क्या हो सकता है?
निवेदन:- अगर आपके लिए What is CSS in Hindi ? – CSS Notes in Hindi – (सीएसएस नोट्स हिंदी में) का यह पोस्ट उपयोगी रहा हो तो इसे अपने दोस्तों के साथ अवश्य share कीजिये. और आपके जो भी questions हो उन्हें नीचे comment करके बताइए. धन्यवाद.
