HTML Classes In Hindi – Class Attribute In HTML In Hindi?

HTML

HTML Classes In Hindi – What Are Classes In HTML? – Class Ek Attribute Hain Jo Har Tag Ke Sath Istemal Kiya Ja Sakta Hai. Kisi Bhi Element Ko Ek Ya Ek Se Jyada Classes Me Rakha Ja Sakta Hai.

What Is The Use Of Class Attribute In HTML In Hindi? – HTML Ke Tags/ Elements Ke Liye Class Specify Karne Se CSS Ke Styles Apply Karna Aur Javascript Ke Function Ko Perform Karna Asaan Ho Jata Hai.

Also Read – CSS And Javascript

HTML Classes In Hindi

Neeche Do Examples Diye Gaye Hain, Example 1 Me Humne Bina Class Attribute Ke Code Diya Hai, Example 2 Me Class Attribute Ka Istemal Kiya Gaya Hai.

Example 1:

<!DOCTYPE html>
<html>
  <head>
    <style>

    div {
      background-color: tomato;
      color: white;
      border: 2px solid black;
      margin: 20px;
      padding: 20px;
    }

    </style>
  </head>
  <body>

    <div>
    <h2>London</h2>
    London is the capital of England.
    </div> 

    <div>
    <h2>Paris</h2>
    Paris is the capital of France.
    </div>

    <div>
    <h2>India</h2>
    India is a beautiful country. Its capital is Delhi.
    </div>

    <div>
    <h2>Tokyo</h2>
    Tokyo is the capital of Japan.
    </div>

  </body>
</html>


Output:

Example 2:

Class Ko Style Me Access Karne Ke Liye . dot Ka Istemal Kiya Jata Hai.

<!DOCTYPE html>
<html>
  <head>
    <style>
    .city {
      background-color: tomato;
      color: white;
      border: 2px solid black;
      margin: 20px;
      padding: 20px;
    }
    .country {
      background-color: green;
      color: white;
      border: 4px solid black;
      margin: 20px;
      padding: 20px;
    }
    </style>
  </head>
  <body>

    <div class="city">
    <h2>London</h2>
    <p>London is the capital of England.</p>
    </div> 

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    </div>

    <div class="country">
    <h2>India</h2>
    <p>India is a beautiful country. Its capital is Delhi.</p>
    </div>

    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    </div>

  </body>
</html>


Output:

Explanation:

Upar Diye Gaye Dono Example Me Jaisa Ki Aap Dekha Paa Rahe Hain, 4 Divisions Hain Aur CSS Humne <div> Tag Par Apply Ki Hai Toh Example 1 Me Har Division Par Ek Jaisa CSS Style Apply Ho Gaya Hai. 

Lekin, Example 2 Me <div> Tag Mein class Attribute Ko Istemal Karke Humne 2 Classes Create Kiye Hain “City” Aur “Country”. Jaisa Ki Aap Output Me Dekh Pa Rahe Hain,Different classes Specify Karne Se Hum Elements Par Different CSS Styles Apply Kar Sakte Hain. Toh Jaisa Ki Example 2 Me Dikhaya Gaya Hai, Jahan Bhi <div> Tag Ka class=“City” Diya Jaega Wahan Ka backround-color : Tomato Hoga Aur Jahan <div> Tag Ka class=“Country” Diya Jaega Wahan background-color : Green Hoga.

Issliye, Upar Diye Gaye Dono Examples Se Yaha Clear Hota Hain Ki, Tags/ Elements Ko Ek Hi Class Me Rakh Kar Hum Unka Ek Group Create Kar Sakte Hain Jo  CSS Aur Javascript Ke Liye Hum Helpful Hoga.

The Syntax For Class

Kisi HTML Tag/ Element Me Class Ko Specify Karne Ke Liye class attribute Ke Saath Uska classname Specify Kiya Jata Hai.

For Example,

<div class="div-class">
  
<p class="para-class">

<ol class="num-list-class"> , etc…

CSS Me Style Selector Ke Liye Humen Classname Se Pehle (.) Period sign Ka Istemal Karna Hoga. Uske Baad {} curly braces Mein Style Properties Di Jati Hain.

For Example,

.div-class{….}

.para-class{….}

.num-list-class{….}, etc…

Multiple Classes

Html Mein Tags/ Elements Ek Se Jayada Classes Ka Hissa Ho Sakte Hain. Aur Aisa Karne Ke Liye Humein Sabhi Classnames Ko Space Ke Jariye Alag-Alag Karna Hota Hai.

For Example,

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>

Aaiye Ab Ek Example Ke Jariye Samajhte Hain Ki Multiple Classes Kis Tarah Se Kaam Karti Hain.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;
    } 

    .main {
      text-align: center;
    }
    </style>
  </head>
<body>

  <h2>Multiple Classes</h2>
  <p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>

  <h2 class="city main">London</h2>
  <h2 class="city">Paris</h2>
  <h2 class="city">Tokyo</h2>

</body>
</html>

Output:

Explanation:

Upar Diye Gaye Emample Mein Classes <h2> Tag Me Create Ki Gayi Hain Ek Class “City” Hai Aur Ek Class “Main” Hai Aur Heading “LONDON” Ko Humne Dono Classes Me Rakha Hai. Aisa Karne Se Uss Heading Par Dono Style Properties Apply Ho Gayi Hain.

Same Class In Different Tags: 

HTML Me Hum Ek Hi Class Ko Alag-Alag Tags/ Elements Me Istemal Kar Sakte Hain, Aur Aisa Karne Se Uss Ek Class Ki Style Properties Un Sab Tags Me Apply Ho Jaengi. Aaiye Ek Example Ki Help Se Samajhte Hain Ki Aisa Kaise Possible Hai.

Example:

<!DOCTYPE html> 
<html> 
<style> 
    .country { 
        background-color: black; 
        color: white; 
        padding: 10px; 
    } 
</style> 
  
<body> 
  
    <h2 class="country">CHINA</h2> 
    <p class="country">China has the largest  
                population in the world.</p> 
  
</body> 
  
</html>

Output:

Explanation:

Upar Diye Gaye Example Me  <h2> Aur <p> Mein class Same Rakhi Gayi Hai, Jisse Uss class Ki Style Properties Dono Me Apply Ho Gayi Hain.

Leave a Reply

Your email address will not be published. Required fields are marked *