[हिंदी] What is CSS, Types Of CSS, CSS Syntax & More Depth Details About CSS

What is CSS in Hindi – CSS क्या है

CSS या Cascading Style Sheets एक स्टाइल शीट भाषा है जिसका उपयोग HTML Documents के दृश्य स्वरूप और Formatting को परिभाषित करने के लिए किया जाता है।  WordPress Themes, वर्डप्रेस द्वारा उत्पन्न डेटा को आउटपुट करने के लिए CSS और HTML का उपयोग करती है।  प्रत्येक WordPress Themes में एक ‘style.css’ फ़ाइल होता है जिसमें वर्डप्रेस द्वारा उत्पन्न पृष्ठों के Formatting को परिभाषित करने के लिए Style Rules होते हैं।

CSS का उपयोग करना बहुत आसान है और सीखने में भी आसान है।  शुरुआती लोगों के लिए CSS Tutorial प्रकाशित करने वाली कई वेबसाइटें हैं जो नये वर्डप्रेस उपयोगकर्ता को इस CSS के सिखने की Process आरंभ करने में मदद कर करता है।  हालाँकि, चूंकि इसका उपयोग करना बहुत सरल है, बहुत सारे WordPress User अपनी WordPress Theme की ‘Style.css’ फ़ाइल को देखकर मूल बातें समझते है।

CSS Style Sheet का उदाहरण देख सकते है 

body { 
font-size:14px;
color: #444;
background-color:#FFFFFF; 
} 
 
h1 { 
font-size:18px;
text-transform:uppercase;
}
 
.post-title { 
font-size: 16px; 
color: #4C0000;
font-weight:normal;
} 

HTML Elements को सीधे CSS में Styled किया जा सकता है।  Designers विभिन्न वर्गों को परिभाषित करने के लिए पहचानकर्ताओं और कक्षाओं का भी उपयोग करते हैं जिन्हें CSS में स्टाइल किया जा सकता है।  यह उन्हें वेब पेज पर लेकिन अलग-अलग अनुभागों में समान HTML Elements के लिए विभिन्न Styles का उपयोग करने में मदद करता है।  उदाहरण के लिए, किसी पृष्ठ के शीर्ष लेख अनुभाग में Blog Title के लिए एक h1 Elements को उसी पृष्ठ के पोस्ट क्षेत्र में किसी अन्य h1 Elements की तुलना में अलग तरीके से स्टाइल किया जा सकता है।

Java क्या है और C++ और Java मे क्या अंतर है

प्रोग्रामिंग लैंग्वेज कैसे सीखे ।। प्रोग्रामिंग भाषा कैसे सीखे जानिए आसान तरीका

OTP क्या है | OTP ka Full Form | OTP Meaning in Hindi | 5 OTP के फायदे और नुकसान क्या क्या है

<div id="header">
 
<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>
 
</div>

ऊपर दिखाए गए HTML में ‘Header’ नाम का एक पहचानकर्ता और ‘Blog Title’ नामक एक Class होता है।  इन Sections को CSS में स्टाइल किया जा सकता है।

उदाहरण स्वरुप

#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 
 
h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
} 

मैंने ऊपर जो HTML Code आपको दिया उसको Design करने के लिए ऊपर दिए CSS Style Code का इस्तेमाल करना पड़ेगा। यानि की अगर HTML एक शरीर है तो फिर CSS उस शरीर का आँखे, नाक, कान, मुँह, हात पैर, आदि बाकि पार्ट्स है जिसके बिना उसको देखने मे अजीब लगता।

Types of CSS (Cascading Style Sheet)

Cascading Style Sheet (Css) का उपयोग उन वेब पेजों में Style Set करने के लिए किया जाता है जिनमें HTML Elements होते हैं।  यह Webpage पर Elements की background color, font-size, font-family, color, आदि Styles सेट करता है।

दोस्तों और ये CSS कितने प्रकार होते है! – तो ये CSS तीन प्रकार के होते हैं। जो नीचे दिए गए हैं

  1. Inline CSS
  2. Internal or Embedded CSS
  3. External CSS

Inline CSS क्या होता है

Inline CSS में Elements के साथ संलग्न बॉडी सेक्शन में Css Property शामिल है जिसे Inline Css के रूप में जाना जाता है।  इस प्रकार की Style,  Style Attribute का उपयोग करके HTML tag के भीतर निर्दिष्ट किया जाता है।

उदाहरण

<!DOCTYPE html> 

<html> 

    <head> 

        <title>Inline CSS</title> 

    </head> 

      

    <body> 

        <p style = "color:#fc0303; font-size:60px; 
               
 font-style:normal; font-weight:bold; text-align:center;"> 

            Hindi Adda 

        </p> 

    </body> 

</html>       

Output:

Inline Css example

Internal or Embedded CSS क्या होता है

इसका उपयोग तब किया जा सकता है जब एक HTML document को विशिष्ट रूप से Style किया जाना चाहिए।  CSS Rules को HTML File के भीतर Head Section में सेट होना चाहिए यानी CSS,  HTML File के भीतर Embed किया गया है।

उदाहरण

<!DOCTYPE html> 

<html> 

    <head> 

        <title>Internal CSS</title> 

        <style> 

            .main { 

                text-align:center;  

            } 

            .GFG { 

                color:#fc0303; 

                font-size:50px; 

                font-weight:bold; 

            } 

            .geeks { 

                font-style:bold; 

                font-size:20px; 

            } 

        </style> 

    </head> 

    <body> 

        <div class = "main"> 

            <div class ="GFG">Hindi Adda</div> 

              

            <div class ="geeks"> 

                हिंदी जानकारी का अड्डा

            </div> 

        </div> 

    </body> 

</html>          

Output:

Css code output

External CSS क्या है

External CSS में अलग Css File होता है जिसमें Tag Attributes (उदाहरण के लिए class, id, heading, आदि) की सहायता से एक Style Property File तैयार किया जाता है।  CSS Property .css extension के साथ एक अलग फ़ाइल में लिखा होता है और इसे link tag का उपयोग करके HTML Elements से जोड़ा जाता है।  इसका मतलब यह है कि प्रत्येक Elements के लिए, Style केवल एक बार सेट किया जा सकता है और इसे सभी Webpages पर लागू किया जा सकता है।

उदाहरण

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}

नीचे दी गई फाइल में CSS Property है।  यह फाइल .css extension के साथ Save होता है। उदाहरण के लिए: geeks.css

नीचे HTML फ़ाइल है जो बनाया गया बाहरी स्टाइल शीट का उपयोग कर रहा है। जिसमे की

Link tag का उपयोग बाहरी Style Sheet को html Webpage से जोड़ने के लिए किया जाता है।

href attributes का उपयोग बाहरी Style Sheet File के स्थान को निर्दिष्ट करने के लिए किया जाता है।

HTML Example Code

<!DOCTYPE html> 

<html> 

    <head> 

        <link rel="stylesheet" href="hindi.css"/> 

    </head> 

  

    <body> 

        <div class = "main"> 

            <div class ="GFG">Hindi Adda</div> 

            <div id ="geeks"> 

                हिंदी जानकारी का अड्डा

            </div> 

        </div> 

    </body> 

Output:

External css code

Properties of CSS

Inline Css की ही सर्वोच्च प्राथमिकता है, फिर Internal/Embedded के बाद External Css आता है जिसमें कम से कम प्राथमिकता होता है।  एक पृष्ठ पर एकाधिक स्टाइल शीट (Style Sheet) को परिभाषित (Defined) किया जा सकता है।  यदि एक HTML Tag के लिए, Styles को कई Style Sheet में परिभाषित (Defined) किया गया है तो नीचे दिए गए क्रम का पालन किया जाएगा।

चूंकि Inline की सर्वोच्च प्राथमिकता है, Internal और External Styles में परिभाषित (Defined) किसी भी Style को External Style Sheet द्वारा Override किया जाता है।

Inline या Internal प्राथमिकता सूची में दूसरे स्थान पर है और External Style Sheet Rules में Style को Override करता है।

CSS का Use क्यों किया जाता है

Css का जो भी काम है वो तो आपको ऊपर ही बफा दिया। लेकिन फिर भी बता दे की CSS का इस्तेमाल होता है

  • Browser के लिए डिफ़ॉल्ट के अलावा अन्य फ़ॉन्ट निर्दिष्ट करें।
  • Text और Link का रंग और आकार निर्दिष्ट करें।
  • Backgrounds में रंग लागू करें।
  • Boxes में Webpage Elements होते हैं और उन Boxes को पेज पर विशिष्ट स्थिति में Float करते हैं।

CSS कैसे काम करता है

CSS कैसे काम करता है, इसकी मूल बातें समझने के लिए, आपको पहले आधुनिक HTML के बारे में थोड़ा समझना होगा।  Web Developers “Box Model” के अनुसार पेज बनाते हैं।  एक Webpage Box की एक Series है, प्रत्येक में एक Elements होता है।  ये Boxes Nested हैं, एक दूसरे के अंदर।

उदाहरण के लिए, एक पेज का Header एक Box होता है, और इसमें कई छोटे Boxes होते हैं जिसमें Header को रूप देने वाले सभी Elements शामिल होता है जैसे: logo, navigation, social media buttons, menu buttons, आदि। CSS का उपयोग करके, एक डेवलपर ”  Header” Box को पूरा का पूरा Make up करता है।  इस उदाहरण में, मान लेते हैं कि डेवलपर Hesder Text को पर्पल रंग देना चाहता है, कोई दूसरा Font Style देना चाहता है और Font Size भी बढ़ाना चाहता है तो इसके लिए उसे CSS को Use करना पड़ेगा।

यहां पर Cascading Style Sheets का “Cascading” हिस्सा चलन में आता है।  Header पर लागू font styles Header के अंदर निहित सभी Elements का Font को चेंज कर देता है और सबपे लागु होता है।  Navigation, Link या Call to action जैसे Text वाले Elements सभी Purple (Chosen Color), Chosen Font और  Chosen Font Size होंगे।

Cascading Style Sheets के फायदे क्या है 

यदि आप अपने वेब पेजों में Cascading Style Sheets (CSS) का उपयोग नहीं कर रहे हैं तो ये बेवकूफ वाला काम होगा।  आज के Browsers में CSS का Excellent Support है।  उन सभी Styles को सीधे अपने HTML पर लागू करने की तुलना में सीखना अपेक्षाकृत आसान है और CSS बेहतर और क्लीनर कोड तैयार करते है। 

यहा CSS का उपयोग करने के कुछ फायदे हैं:

  • बनाए रखने और अद्यतन करने में आसान है।
  • डिजाइन में अधिक स्थिरता है इसमें। 
  • इसमें अधिक स्वरूपण विकल्प है।
  • CSS का Code बिलकुल लाइटवेट कोड है।
  • इसका तेज़ डाउनलोड समय बोहोती कम है।
  • Search Engines Optimization यानि की SEO मे बोहोत सुबिधा मिलता है।
  • इसमें विभिन्न Viewers को विभिन्न Styles को प्रस्तुत करने में आसानी होता है। 
  • CSS मे Greater Accessibility मिलता है।
  • प्रभावी ढंग से उपयोग की जाने वाली, Style Sheet Browser Cache में संग्रहीत रहता है और उन्हें फिर से डाउनलोड किए बिना कई पृष्ठों पर उपयोग किया जा सकता है।

CSS के नुकसान क्या क्या है

वैसे तो CSS का नुकसान बोहोती सीधा साधा है फिर भी कुछ समय पहले इसको बड़ी रूप से ही देखा जाता था।

  • कुछ Styles चयनकर्ता (Selectors) समर्थित हैं और कुछ नहीं हैं।  हमें यह निर्धारित करना होगा कि @support चयनकर्ता (Selectors) का उपयोग करके कौन सी Style समर्थित है या नहीं)।
  • कुछ चयनकर्ता (Selectors) भिन्न Browser में भिन्न Behave करते हैं।
  • वर्तमान में, CSS का उपयोग करके, आप Parent Tag का चयन नहीं कर सकते हैं।

CSS के कुछ Interview Questions and Answers

दोस्तों अब हम आपको Css interview questions के बारे मे बताएँगे। क्युकी बोहोत लोग जब Interview मे जाते है तो उन्हें इसके लिए बोहोत मदद हो जायेगा। तो चलिए जान लेते है कुछ CSS Interview Questions and Answers।

Q1- CSS Full Form

A. CSS का Full Form है Cascading Style Sheet।

Q2 – CSS Meaning in Computer

A. CSS एक Style Sheet भाषा है जो यह निर्धारित करती है कि Computer Browser या Mobile Browser के Webpage में Elements/Contents को कैसे देखा/दिखाया जाता है।  CSS का उपयोग सभी पृष्ठों के लिए एक सुसंगत रूप और अनुभव विकसित करने के लिए किया जाता है।

Q3 – How Many Types of CSS?

A. CSS तीन प्रकार के होते है। और वो है Inline CSS, Internal or Embedded CSS और External CSS।

Q4 – Which CSS is Highest Value? 

A. दोस्तों Inline CSS कही सबसे ज्यादा Value है।

Q5 – CSS को Webpage मे कैसे जोड़े? 

दोस्तों, Webpage में CSS को शामिल करने के विभिन्न तरीके हैं।

1 – HTML Documents से जुड़ी एक External File लिंक टैग का उपयोग करके, हम स्टाइल शीट को HTML पृष्ठ से लिंक कर सकते हैं।

2 – HTML पृष्ठ में CSS Styles का एक सेट को शामिल करके। Opening और Closing स्टाइल टैग के बीच अपने CSS Rules को जोड़ें और अपने CSS को ठीक उसी तरह लिखें जैसे आप Stand-Alone Stylesheet Files में करते हैं।

3 – Style टैग का उपयोग करके Style को सीधे HTML Elements में जोड़ा जा सकता है।

4 – CSS जोड़ने का दूसरा तरीका @import नियम का उपयोग करना है। यह CSS के भीतर ही एक नई CSS फ़ाइल जोड़ने के लिए है इस्तेमाल किया जाता है।

निष्कर्ष

दोस्तों ऊपर मैंने आपको बोहोत कोसिस किया है की What is CSS in Hindi, CSS full form, CSS kya hai, Types of CSS in hindi सभी को अच्छे से बताने का। मैंने पुरे details के साथ इस पोस्ट को आपके लिए लिखा अगर अच्छा लगता है तो शेयर ज़रूर करें और अगर कोई भी प्रॉब्लम आये तो निचे कमैंट्स मे बताना। 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

close button