CSS in Hindi Tutorial




CSS एक Web Designing Language है. इसका उपयोग Website को और भी Attractive बनाने के लिए किया जाता है. CSS के द्वारा आप HTML Tags पर Designing लागू कर सकते है.

CSS के प्रयोग से आपका सामान्‍य सा दिखने वाला HTML Page अत्‍यन्‍त आकर्षक दिखने लग जाता है. अपने Web Page मे लगे हुए Images का आकार प्रकार आदि आवश्‍यकतानुसार बनाने के लिये तथा अन्‍य बहुत सारे Design कार्य को करने के लिये हम CSS का प्रयोग करते है. CSS को सीखने के पहले हमे HTML का पूरा ज्ञान होना आवश्‍यक है.

यदि हम HTML की जानकारी नहीं रखते है तो हमारे लिये CSS को सीखना बहुत मुश्किल होगा. CSS को सीखकर भी हम इसका कोई प्रयोग नहीं कर सकते क्‍यूँकि यह स्‍वतन्‍त्र रूप से प्रयुक्‍त नहीं होता है. क्‍यूँकि यह HTML Tag पर लिखा जाता है और यह HTML Tag पर ही कार्य करता है. इसलिये CSS को सीखने से पहले आपको HTML का सामान्‍य ज्ञान तो होना आवश्‍यक है. CSS आप तीन प्रकार से Apply कर सकते है.

  • Inline CSS

  • Internal CSS

  • External CSS

Inline CSS

इस विधि मे आप CSS को HTML Tag मे ही Define कर देते है. ऐसा आप Style Attribute के द्वारा कर सकते है.

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Inline CSS Example</title>
   </head>
   <body>
      <h1 style="color:blue">The Text in this example will be red</h1>
         <p style="color:red">My Name is Ammu.</p>
         <p style="color:blue">I Live in Telangana.</p>
      <p style="color:red">My Best Friend is Ali.</p>
   </body>
</html>

Output

Internal CSS

इस विधि मे आप CSS को HTML Tag मे Define करने की बजाए HTML File के <head> Tag मे <style> Tag की सहायता से Define करते है.

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Internal CSS Example</title>
      <style>
            p{color: green}
            h1{ text-align:center; color:red}
         }
      </style>
   </head>
   <body>
      <h1>Welcome to My Website</h1>
         <p>My Name is Ammu.</p>
         <p>I Live in Telangana.</p>
      <p>My Best Friend is Ali.</p>
   </body>
</html>

Output

External CSS

इस विधि मे आपकी CSS File और HTML File अलग अलग होती है. HTML File मे आप CSS File को <link> Attribute के द्वारा Add कर सकते है.

CSS से आप Webpages के Presentation को नियंत्रण कर सकते है. CSS आपको Webpage की Design पर पूरा नियंत्रण देती है. CSS से आप Webpage का Text Color, Font Family, Background, Margin, Padding और स्थिति आदि Set कर सकते है.

CSS बहुत ही प्रभावशाली Technology है. इसकी सहायता से आप Complete HTML Page की Presentation को नियंत्रण कर सकते है. CSS Property और Value के Context मे काम करती है. जैसे की यदि आप Web Page का background-color बदलना चाहते है तो background-color Property है और जो आप Value देंगे वो इसकी Value होगी.


property:value;


जैसा की मैने ऊपर भी बताया है Inline Style Sheet मे आप Style Attribute का उपयोग करते है. लेकिन Internal और External CSS के लिए <style> Tag मे Selectors उपयोग किया जाता है. Selector उस Tag, Id या Class का नाम होता है जिस पर आप CSS Apply करना चाहते है.

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>External CSS Example</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <h1>The Text in this example will be red</h1>
         <p>My Name is Ammu.</p>
         <p>I Live in Telangana.</p>
      <p>My Best Friend is Ali.</p>
   </body>
</html>

Output

Advantages of CSS

  • CSS को उपयोग करने से आपका समय बचता है. आप एक CSS File बना कर उसे कई HTML Documents पर लागू कर सकते है. आप हर HTML Tag के लिए एक Style Fix कर सकते है और इसे जितने चाहे उतने Webpages पर लागू कर सकते है.

  • CSS के द्वारा Webpage को Maintain करना बहुत ही Simple होता है. उदहारण के लिए आप सभी Headings का यदि Color बदलना चाहते है तो सिर्फ CSS मे Change कीजिये और ये सभी Headings पर लागू हो जायेगा.

  • CSS आपको HTML से अधिक Style Options प्रदान करती है. HTML की तुलना मे आप CSS से अधिक Attractive Webpages बना सकते है.

  • CSS के द्वारा आप एक ही Webpage को विभिन्न Devices के लिए Configure कर सकते है. जैसे की मोबाइल फोन के लिए अलग Styles उपयोग की जा सकती है.

  • HTML Attributes का उपयोग अब बहुत कम हो चूका है. CSS को उपयोग करना अब एक Global Standard बन चूका है.