CSS Types in HTML in Hindi – CSS के प्रकार और कैसे उपयोग करते हैं

by
Table of Contents hide
1 सिएसएस के प्रकार | Types of CSS in Hindi
2 Inline Style इनलाइन सिएसएस
2.1 Inline CSS Type Demo Example
3 Internal StyleSheet आतंरिक सीएसएस
4 External StyleSheet बाहरी सीएसएस
5 अन्य CSS tutorial के सुझाव

सिएसएस के प्रकार | Types of CSS in Hindi

CSS एक language है जिसे वेबपेज को स्टाइल देने में उपयोग किया जाता है | इसके बिना एक वेबपेज सिर्फ काले अक्षरों का समारोह दिखेगा जिसे समझना काफी मुस्किल लगेगा | CSS का उपयोग optional है क्योंकि इसका काम वेबसाइट को आकर्षित बनाना है, पर इसके बिना वेबपेज की बाकि functionality अच्छे से काम करती है | हाँ css के बिना वेबसाइट दिखने में अच्छा नहीं लगेगा |

एक beginner जैसे html कोड notepad में लिख कर practice कर सकता है, वैसे ही css कोड भी notepad में लिख सकता है | जिसे हम इस tutorial में सीखेंगे |

CSS का एक वेबपेज में 3 तरह से उपयोग किआ जा सकता है | मतलब CSS कोड को HTML Webpage में 3 तरह लिखी जा सकती है |

  1. Inline Style
  2. Internal StyleSheet
  3. External StyleSheet

Inline Style इनलाइन सिएसएस

एचटीएमएल पेज में अगर किसी element को स्टाइल देना है, तो inline css का इस्तेमाल किआ जाता है | इसे उसी टेग में style attribute के जरिये लिखा जाता है |

Syntax:
<tagname style=”property: value;”>

property: क्या style देना है जैसे फॉन्ट का कलर , या फॉन्ट साइज़ या फॉन्ट फॅमिली बदलना है, ये सब “property” के जरिये बताया जाता है |

value: ये property की value बताता है | जैसे अगर फॉन्ट कलर ब्लू रखना है, तो blue, value के जगह लिखी जायेगी |

उदाहरण:

<h1 style="color: blue;">CSS Demo Heading</h1>

Inline CSS Type Demo Example

<html>
   <head>
      <title>Inline CSS Type</title>
   </head>
   <body>
      <h1>CSS Tutorial</h1>
      <p style="color: red;">CSS used for styling</p>
      <h1>Javascript Tutorial</h1>
      <p style="font-family: Arial; color: green; font-size: 20px;">
         Javascript used for writing client side application
      </p>
      <h1>HTML Tutorial</h1>
      <p style="color: blue;">HTML used for basic structure</p>
   </body>
</html>

ऊपर दिए उदाहरण में आप देख सकतें हैं html पेज में 3 पैराग्राफ है, और तीनो को अलग तरह से style किआ गया है | ऐसे ही हम inline css से हर element  को अलग अलग style दे सकतें हैं |

output:

inline css type example

Internal StyleSheet आतंरिक सीएसएस

किसी वेबपेज में कई सारे element होतें हैं | और एक जैसे element को same style देना हो तो, हर एक टेग में style attribute को लिखना मुस्किल होगा | बार बार एक ही कोड को लिखना पड़ेगा और ये अधिक समय बर्बाद करेगा |

मान लीजिये आपको सारे पैराग्राफ का फॉन्ट कलर और फॉन्ट साइज़ एक जैसी रखनी है | और वेबपेज में 10 पैराग्राफ है, तो ये कितना काम बढ़ा देगा हर पैराग्राफ में style attribute लिख कर style देने में | तो इसका हल है internal stylesheet, इसके जरिये हम सारे style को एक बार ही लिख सकते हैं |

internal stylesheet को <head> tag में लिखी जाती है, और इसे <style> tag के जरिये दरसाया जाता है | पुरे वेबपेज के लिए जो भी style की जरुरत है, वो सब <style> tag में आराम से बताई जा सकती है |

उदाहरण:

<html>
   <head>
      <title>Internal Stylesheet Type</title>
      <style>
         p{ font-size: 20px; color: maroon; font-family: Arial;}
         h1{ color: blue; background-color: yellow;}
      </style>
   </head>
   <body>
      <h1>CSS Tutorial</h1>
      <p>CSS used for styling.font color can be changed easily</p>
      <h1>Javascript Tutorial</h1>
      <p>
         Javascript used for writing client side application
      </p>
      <h1>HTML Tutorial</h1>
      <p>HTML used for basic structure</p>
   </body>
</html>

output:

internal stylesheet example

External StyleSheet बाहरी सीएसएस

इसमें हम सारे css कोड को, मतलब सारे style को एक अलग फाइल में लिखतें हैं | और उस फाइल का link HTML Page में देते हैं | external stylesheet का link, <link> tag के जरिये <head> tag में बताया जाता है |

एक वेबसाइट में कई सारे वेबपेज होतें हैं | हर पेज में css style लिखने से काम का बर्डन भी बढेगा और ये समय भी ज्यादा लेगा | इसीलिए सारे जरुरत के css style को एक फाइल में लिख कर, उसका उपयोग हर वेबपेज में कर सकतें हैं | इससे पुरे वेबसाइट का style को मैनेज करना आसान हो जाता है |

और अगर बाद में डिजाईन में कुछ बदलाव लाना है, तो बस एक ही फाइल में बदलाव करना पड़ता है | External CSS File को .css extension के जरिये save की जाती है | निचे image में sample देखें |

External CSS File ऐड करने का Syntax:

<head>
 <link rel="stylesheet" href="cssfilename.css">
</head>

External CSS उदाहरण:

<!Doctype html>
<html>
   <head>
      <title>Internal Stylesheet Type</title>
      <link rel="stylesheet" href="mycssfile.css">
   </head>
   <body>
      <h1>CSS Tutorial</h1>
      <p>CSS used for styling.font color can be changed easily</p>
      <h1>Javascript Tutorial</h1>
      <p>
         Javascript used for writing client side application
      </p>
      <h1>HTML Tutorial</h1>
      <p>HTML used for basic structure</p>
   </body>
</html>

नॉटपॉइंट*** external stylesheet में style लिखने के लिए css code को <style> tag के अन्दर रखने की जरुरत नहीं होती | जो भी style जिस tag या id के लिए लिखना है वो direct लिखी जाती है | पर file को .css extension के साथ save करना जरुरी है |

अन्य CSS tutorial के सुझाव