आज इस आर्टिकल में हम आपको HTML Class & Id Attributes in Hindi – Part 14 के बारे में बताने जा रहे है.
Class और Id अलग अलग attribute है जिनको हम किसी element को target करने के लिए इस्तेमाल करते है. इसका सबसे ज्यादा इस्तेमाल javaScript और CSS में किसी element की design और Event बनाने के लिए किया जाता है.
इन attribute का इस्तेमाल करके हम किसी element को एक विशेष प्रकार की identity देते है ताकि जब भी हम इसकी designing करे तो दुसरे same element पर कोई इफ़ेक्ट ना आये.
HTML Class Attribute
HTML में class=”classname” से attribute का इस्तेमाल किया जाता है. जब भी हमें jquery, javascipt या CSS में किसी class attribute से जुड़े element का इस्तेमाल करना होता है तो हम उसको (.classname) से define करके उसकी styling या उस पर event create करते है. यहाँ पर हम आपको Internal CSS में इसका इस्तेमाल करके बता रहे ताकि आपको CSS chapter में परेशानी का सामना ना करना पड़े.
Example
<!DOCTYPE html>
<html>
<head>
<title>Class Attribute Part 14</title>
<style type="text/css">
{
color:red;
font-family: courier;
}
</style>
</head>
<body>
<p >This is our first paragraph</p>
</body>
</html>
output>>>>>>>>
इस प्रकार हम class का इस्तेमाल करते है. class के इस्तेमाल करने के बहुत से फायदे है जैसे किसी एक element को target करना, या कई element में एक ही classname का इस्तेमाल करके एक जैसा डिजाईन देना. हम class का इस्तेमाल javascipt में भी कर सकते है. इसके बारे में हम आपको javascipt के tutorial में बताएँगे.
Multiple ClassName in One Class Attribute
<!DOCTYPE html>
<html>
<head>
<title>Class Attribute Part 14</title>
<style type="text/css">
{
color:red;
font-family: courier;
}
{
font-weight: 500;
}
{
background-color: skyblue;
}
</style>
</head>
<body>
<p >This is our first paragraph</p>
</body>
</html>
output>>>>>>
HTML id Attribute
इसका इस्तेमाल भी हम किसी element को target करने के लिए करते है. किसी element में इसके इस्तेमाल के लिए आपको id=”idname” का इस्तेमाल करते है. और जब हमें इसको अपने CSS में target करना हो तो हम #idname का इस्तेमाल करते है.
Example
<!DOCTYPE html>
<html>
<head>
<title>Class Attribute Part 14</title>
<style type="text/css">
{
text-align:center;
}
</style>
</head>
<body>
<h1 >This is our first Heading</h1>
</body>
</html>
output>>>>>>
HTML id और Class में अंतर
दोनों का काम एक जैसा है लेकिन इसमें थोडा सा फर्क है. id किसी एक element में इस्तेमाल की जाती है और हर element में आपको id की value अलग रखनी चाहिए. Class को काम multiple इस्तेमाल कर सकते है. आप एक ही classname को कई element में इस्तेमाल कर सकत है.
