What is CSS
CSS का पूरा नाम cascading style sheet है। यह एक स्टाइलिश प्रोग्रामिंग लैंग्वेज है जिसे HTML के साथ इस्तेमाल किया जाता है।
HTML में वेब पेज तैयार किया जाता है और उसी वेब पेज को डिजाइन करने के लिए CSS लागू किया जाता है, जिससे पेज और भी अधिक आकर्षक और इंटरएक्टिव बन जाता है। CSS का उपयोग करके एक या एक से अधिक पेज को एक साथ डिजाइन किया जा सकता है।
CSS की मदद से HTML के पेज को design और layout किया जाता है। CSS का मुख्य कार्य वेब पेज का layout, colour, fonts, spacing और design करना होता है।
History of CSS
CSS को सन् 1994 में Håkon Wium Lie और Bert Bos ने develop किया था। CSS का मुख्य उद्देश्य HTML पेज को डिजाइन करना था। CSS को केवल HTML और XML के साथ उपयोग किया जाता है।
दिसंबर सन् 1996 में W3 (World Wide Web) Consortium द्वारा CSS का पहला version (CSS1) प्रकाशित किया गया।
CSS1 के बाद CSS ने अपने चार और version प्रकाशित किए, जिसमें नए नए elements जोड़े गए। इनमें CSS2, CSS2.1, CSS3 और CSS4 शामिल हैं। CSS4 इसका latest version है, जो वर्तमान में उपयोग हो रहा है।
Types of CSS
किसी भी वेबपेज को स्टाइल देना वेबसाइट के लिए आवश्यक होता है। इससे वेबसाइट स्टैंडर्ड और आकर्षक होती है, जिससे यूजर website में इंटरेक्ट होते हैं। HTML से वेबसाइट तो बना सकते हैं लेकिन उसे डिजाइन नहीं कर सकते। इसके लिए CSS का उपयोग किया जाता है।
CSS मुख्य रूप से तीन प्रकार के होते है:
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
Inline CSS को body section के अंतर्गत परिभाषित किया जाता है। यह HTML पेज के किसी tag के elements के लिए होता है।
Inline CSS का उपयोग HTML elements को एक-एक करके design करने के लिए किया जाता है। इसमें अपनी इच्छा अनुसार किसी भी text element का font, size, colour, आदि change कर सकते हैं।
Inline CSS में किसी element को design देने के लिए “style” attribute के अंदर लिखा जाता है। अर्थात CSS properties को HTML elements के अंतर्गत define किया जाता है।
Example:
2 . Internal CSS
Internal CSS को header section के अंतर्गत परिभाषित किया जाता है। इसमें एक बार में पूरे पेज को design किया जा सकता है। इसमें “style” attribute को किसी tag के अंतर्गत नहीं रखा जाता, उसे block style में परिभाषित किया जाता है।
Internal CSS को HTML के header section में CSS properties को define किया जाता है। इसका फायदा यह है कि एक से अधिक elements को एक साथ डिजाइन किया जा सकता है, जिससे काफी समय की बचत होती है।
Example
3. External CSS
यह internal CSS की तरह ही होता है। इन दोनों में अंतर यह है कि internal CSS में केवल एक पेज को design किया जाता है, और external CSS में एक से अधिक पेज को design किया जाता है।
External CSS design करने के लिए हमें एक अलग से CSS file बनानी पड़ती है और उसे HTML file में लिंक करके एक से अधिक पेज में लागू किया जा सकता है।
Example:
CSS file (styles.css)
Eternal CSS
Feature of CSS
- Selectors: CSS selectors के द्वारा, HTML elements को design किया जाता है और उनके styles को define किया जा सकता है।
- Properties: CSS properties से, HTML elements को styles दे सकते हैं, जिससे elements की color, font-size, background-color, आदि को design कर सकते हैं।
- Values: CSS values के द्वारा, CSS properties को assign किया जाता है जैसे कि color: red, font-size: 20px, आदि।
- Box Model: इसकी मदद से, HTML elements के लेआउट को कंट्रोल किया जाता है। जैसे width, height, padding, margin, आदि।
- Positioning: CSS positioning के द्वारा, HTML elements के position को निर्धारित किया जाता है। जैसे absolute, relative, fixed, आदि।
- Display: इससे HTML elements के display type को control किया जाता है जैसे block, inline, inline-block, आदि।
- Media Queries: CSS media queries की मदद से, HTML elements के styles को different devices और screen sizes के लिए customize किया जा सकता है।
- Animations and Transitions: इससे HTML elements के styles को animate किया जा सकता है, जिससे वेबपेज और भी अधिक आकर्षक हो जाता है।
- Pseudo-classes and Pseudo-elements: CSS pseudo-classes और pseudo-elements में, HTML elements के styles के साथ-साथ document tree के बीच रिलेशन बना सकते हैं। साथ ही इसमें selector का उपयोग करके elements को design कर सकते हैं, जैसे कि किसी link पर माउस ले जाने पर उसका रंग क्या होगा या किसी टेक्स्ट को क्लिक करने पर उसका रंग क्या होगा, यह निर्धारित कर सकते हैं।
- CSS Preprocessors: CSS preprocessors के द्वारा, CSS code को ज्यादा efficient (कुशल) और modular बनाया जा सकता है।
“CSS क्या है ? What is CSS in Hindi” उम्मीद है कि यह topic आपके लिए Helpful हुआ होगा। और अधिक topics के लिए Search Button अथवा Read More Topics पर जाएं। “