HTML class Attribute

 Night Mode  Light Mode

 

Definition and Usage

The class attribute is a global attribute. It specifies the class name for an element, which can used by CSS and JavaScript to control the behaviour of an element.

Example :

Controlled the behaviour of the <h3> element using the class name by CSS.

<h3 class="heading-3">Heading level 3</h3>

<style>

.heading-3 {
color: red;
background-color: #eee;
width: 150px;
}

</style>
Result

Heading level 3

 
Controlled the behaviour of the <h3> element using the class name by JavaScript.

<h3 class="heading-3">First Element</h3>
<h3 class="heading-3">Second Element</h3>

<script>

var x = document.getElementsByClassName("heading-3");
x[0].style.backgroundColor = "#eee";
x[0].style.width = "150px";
x[0].style.color = "blue";

</script>
Result

First Element

Second Element

 

Note :

The same name for multiple elements can be placed.

Example :

<h4 class="first">Ali is a good man</h4>

<b class="first">He always goes to school on time</b>

<p class="first">He is an active student</p>

 

Next ❯

❮ Previous

Here are a few tutorials for you to read next:

If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?

Leave a Comment

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