CSS in Hindi : Introduction

  • Introduction to CSS in Hindi 
  • Features of CSS in Hindi 
  • Different version of CSS in Hindi

Introduction to CSS in Hindi 

CSS एक designing language है। इसका इस्तेमाल webpages को और भी beautiful बनाने के लिए किया जाता है। CSS के द्वारा आप HTML tags पर designing apply कर सकते है।

CSS आप 3 तरह से apply कर सकते है। 

  • Inline – इस method में आप CSS को HTML tag में ही define कर देते है। ऐसा आप style attribute के द्वारा करते है। 
  • Internal – इस method में आप CSS को HTML tag में define करने की बजाए HTML file के <head> tag में <style> tag की मदद से define करते है।   
  • External  – इस method में आपकी CSS file और HTML file अलग अलग होती है। HTML file में आप CSS file को <link> attribute के द्वारा add करवाते है। 

CSS से आप webpages के presentation को control कर सकते है। CSS आपको webpage की design पर पूरा control देती है।

CSS से आप web page का text color, font family, background, margin, padding और position आदि set कर सकते है। 

Property & Value

CSS बहुत ही powerful technology है। इसकी मदद से आप complete HTML page की presentation control कर सकते है। CSS property और value के context में काम करती है।

जैसे की यदि आप web page का background-color change करना चाहते है तो background-color property है और जो आप value देंगे वो इसकी value होगी।

property:value;

जैसा की मैने ऊपर बताया inline style sheet में आप style attribute यूज़ करते है। लेकिन internal और external CSS के लिए <style> tag में selectors यूज़ किये जाते है।

Selector उस tag, id या class का नाम होता है जिस पर आप CSS apply करना चाहते है। Selector के बारे में और अधिक detail से next tutorial में बताया गया है।

Advantages of CSS (Cascading Style Sheet)

  1. CSS को यूज़ करने से आपका time बचता है। आप एक CSS file बना कर उसे कई HTML documents पर apply कर सकते है। आप हर HTML tag के लिए एक style fix कर सकते है और इसे जितने चाहे उतने webpages पर apply कर सकते है। 
  2. जब आप HTML attributes के द्वारा webpage को decorate करते है तो हर element के लिए अलग से attribute और value define करनी पड़ती है। ऐसा करने से code बहुत अधिक हो जाता है और pages धीरे load होते है। लेकिन जब आप CSS यूज़ करते है तो उस webpage में यूज़ होने वाले सभी tags के लिए आप एक बार ही styles define कर सकते है। ऐसा करने से code कम रहता है और आपके pages fast load होते है। 
  3. CSS के द्वारा webpage को maintain करना बहुत ही आसान होता है। उदहारण के लिए आप सभी headings का यदि color change करना चाहते है तो सिर्फ CSS में change कीजिये और ये सभी headings पर apply हो जायेगा। 
  4. यह आपको HTML से अधिक style options provide करती है। HTML के comparison में आप CSS से अधिक attractive web pages design कर सकते है। 
  5. CSS के द्वारा आप एक ही webpage को multiple devices के लिए configure कर सकते है। जैसे की mobile phones के लिए अलग styles यूज़ की जा सकती है। 
  6. अब HTML attributes का उपयोग बहुत कम हो चूका है। CSS को यूज़ करना अब एक global standard बन चूका है।        

Applying CSS (Cascading style sheet) 

Inline Style Sheet 

निचे दिए गए उदाहरण को देखिये इसमें body tag के अंदर style attribute define किया गया है। इसके बाद style attribute में property और value define की गई है।

इसे inline style sheet कहते है।    

Example

<html> 
 
<head>
<title>Inline CSS Demo</title>
</head>

<body style="background-color:pink">
<p>This is inline CSS Demo</p>
</body>

</html>

Output

Internal Style Sheet 

Internal style sheet में आप styles को tag के अंदर define नहीं करते है। Head section में <style> tag define किया जाता है।

इसके बाद selectors को यूज़ करते हुए आप styles को define करते है। इसमें HTML code और CSS code को एक ही document में define किया जाता है।     

Example

<html> 
 
<head>

<title>Internal Style Demo</title>

<style>
body {
  background-color:red;
}
</style>

</head>

<body>
<p>This is internal style sheet</p>
</body>

</html>

Output

External Style Sheet

External style sheet के संदर्भ में CSS किसी दूसरी file में होती है। उस file को <link> tag द्वारा HTML file से जोड़ा जाता है। External style sheet से आपको बार बार CSS लिखने की जरुरत नहीं होती है।

आप एक ही CSS file को कई HTML files पर apply कर सकते है। इसका उदाहरण निचे दिया जा रहा है। 

Example

externalDemo.html File

<html> 
 
<head>

<title>External Style Demo</title>

<link rel="stylesheet" type="text/css" href="externalDemo.css">

</head>

<body>
<p> This is external stylesheet</p>
</body>

</html>

externalDemo.css File

body {
  background-color:lime;
}

Output 

Next: CSS Selectors

23 thoughts on “CSS in Hindi : Introduction”

    1. Navigation baar links ki list hoti h jise aap horizontally ya vertically apne webpage me place Kar sake h. Isme aap apne page se related important pages ki links place karte h.

    1. iske liye aapko CSS ki cursor property use karni hogi. Ise aap us element ke liye use karenge jis par aap cursor ko change karna chahte hie. jese ki koi paragraph h to aap is prakar define karenge.

      p
      {
      cursor: help;
      }

      cursor property ki niche di gyi value ho sakti h.

      auto
      crosshair
      default
      e-resize
      grab
      help
      move
      n-resize
      ne-resize
      nw-resize
      pointer
      progress
      s-resize
      se-resize
      sw-resize
      text
      w-resize
      wait
      not-allowed
      no-drop