CSS in Hindi Tutorial




CSS वेब डिजाइनिंग के लिये बहुत अच्छी लैंग्वेज मानी जाती है. क्योकि अगर आप अपनी वेबसाइट में इसका उपयोग करते है तो आपकी वेबसाइट बहुत अच्छी बनती है.

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

HTML में इनलाइन सीएसएस जोड़ने के लिए Style Attribute का उपयोग किया जाता है. Style Attribute एक Element के लिए एक Inline Style Specified करती है. सीएसएस Attribute का उपयोग Font-family, font-style, text-decoration, direction आदि जैसे Attributes के साथ किया जाता है.

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

HTML में CSS का विभिन्न तरीकों से उपयोग किया जा सकता है. उनमें से एक Internal CSS का उपयोग है अर्थात् <style> Tag. <style> टैग का उपयोग<head>… </head> टैग में किया जाता है. यह एक पृष्ठ के लिए सीएसएस Style को परिभाषित करता है.

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

आपके HTML दस्तावेज़ में बाहरी स्टाइलशीट फ़ाइल को शामिल करने के लिए <link> Element का उपयोग किया जा सकता है.

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


property:value;


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