HTML Class and Id


HTML Class क्या हैं?

Class Attribute द्वारा same class को एक-सा style दिया जाता हैं। जिससे एक ही code को बार- बार लिखने की आवश्कता नहीं होती हैं।

इससे आपका समय भी बचेगा और आप Professional भी लगोगे।

जैसे की मान लीजिये आपके पास दो Tags h2 और paragraph हैं और आप चाहते हो की दोनों को एक style देना हैं तो आपको दो बार style code लिखने की कोई आवश्कता नहीं हैं।

बल्कि आप class attribute के जरिये एक ही बार code को लिख कर दोनों के style को एक-सा बना सकते हो।

Example and Syntax for Class:

एक class बनाने के लिए, सबसे पहले एक dot (.) character लिखें, उसके बाद एक class name लिखें। फिर curly braces {} के भीतर CSS properties को परिभाषित करें:

<!DOCTYPE html>
<html>
<head>
     <title>HTML Class </title>
     <style>
          .description{
               background-color: red;
               color: white;
          }
     </style>
</head>
<body>
     <h2 class="description">Class in  HTML:</h2>
     <p class="description">This is Paragraph of Class HTML.</p>
</body>
</html>

Output:

Class in HTML:

This is Paragraph of Class HTML.



HTML Id attribute क्या हैं?

HTML में id attribute एक तरह से unique id होती है, जो किसी भी tag को दी जाती हैं।

इस id value का उपयोग आप CSS और JavaScript जैसी languages में linking के लिए किया जाता हैं।

Id attribute को CSS में हमेशा hash (#) द्वारा define किया जाता हैं।

परन्तु Id attribute को define करने से पहले कुछ बातों का ध्यान देना बहुत जरूरी है:

  1. जैसे की Id attribute एक case sensitive value होती हैं।

    2. यानि की आप “raj” को “Raj” नहीं लिख सकते हैं। यह दोनों अलग- अलग हैं।

  2. Id attribute हमेशा alphabet से शरू होता हैं। आप alphabet के अंदर underscore(_) या hyphen(-) लगा सकते हैं।

    3. इसका मतलब यह है की आप id attribute को “ganesh” से ही शरू कर सकते हैं। लेकिन आप “3ganesh” नहीं लिख सकते हैं।
    आप underscore(_) या hyphen(-) के जरिये “ganesh_3 या ganesh-3 कुछ इस प्रकार से कर सकते हैं।

  3. Id attribute की value के बीच में कोई space नहीं दे सकते हैं। जैसे की “gan esh”

Example and Syntax for id attribute:

एक id बनाने के लिए, सबसे पहले एक hash (#) symbol लिखें, उसके बाद एक id name लिखें। फिर curly braces {} के भीतर CSS properties को परिभाषित करें:

<!DOCTYPE html>
<html>
<head>
     <title>HTML Id Attribute</title>
     <style>
          #paraId{
               background-color: red;
               color: white;
          }
     </style>
</head>
<body>
      <div id="paraId">
           <h2>Id Atrribute in HTML:</h2>
         <p>This is Paragraph of Id Atrribute in HTML.</p>
      <div>
</body>
</html>

Output:

Id Atrribute in HTML:

This is Paragraph of Id Atrribute in HTML.