HTML Classes

सोचिए आप एक school चला रहे हैं और sports day organize करना चाहते हैं। अगर आपके पास पचास students हैं, तो हर बच्चे का नाम लेकर उसे red shirt पहनने को कहना बहुत मुश्किल काम है। इसके बजाय, आप उन्हें एक team में assign कर देते हैं, जैसे 'Team Red'। अब जब भी आप 'Team Red' चिल्लाते हैं, उस group का हर कोई जान जाता है कि उसे क्या करना है। HTML classes बिल्कुल उन school teams की तरह काम करती हैं। एक class एक custom name tag है जिसे आप अपने elements पर लगाते हैं। एक ही class में कई elements रखकर, आप उन सभी को एक साथ style या program कर सकते हैं। यह अपने पूरे page पर design को consistent रखने का सबसे efficient तरीका है, बिना हर container के लिए अपना code बार-बार दोहराए।

<tagname class="classname">content</tagname>

<style>
  .classname {
    property: value;
  }
</style>

<p class="highlight">First</p>
<p class="highlight">Second</p>

<style>
  .highlight {
    color: orange;
  }
</style>
<p class="highlight">Styled by class</p>

<div class="card large">Combined classes</div>

<script>
  document.querySelectorAll('.highlight');
</script>
<p class="highlight">Targeted by script</p>

<div class="tool-container">Semantic, hyphenated class name</div>