HTML class Attribute

 

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?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Helpful

Leave a Comment

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