How To Make a Classes in HTML

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

The HTML class attribute is used to specify a class for an HTML element,Multiple HTML elements can share the same class,The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name,In the following example we have three 'div' elements with a class attribute with the value of "city". All of the three 'div' elements will be styled equally according to the,city style definition in the head section:

HTML Classes

1. Class Attribute  We Can Create a Html File

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px 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="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

2.Different Elements Can  use same class name
<!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>
3.Use the class Attribute in Javascript
<!DOCTYPE html>
<html>
<head>
    <style>
        .city{
            color:red;
            font-size: 30px;
        }
        h1{
            color:blue;
        }
button{
    background-color: greenyellow;
}

    </style>
</head>
<body>

<h1>Use of The class Attribute in JavaScript</h1>
<p>Click the button to hide all elements with class name "city":</p>

<button onclick="myFunction()">Hide elements</button>

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

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

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

<script>
    function myFunction() {
        var x = document.getElementsByClassName("city");
        for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
    }
</script>

</body>
</html>

Related Post