You Are Here

HTML Class Attribute

HTML class attribute is used to define one or more class names for an element.
The class attribute can be used on any HTML element and the class name can be used by CSS and JavaScript to perform a specific task for elements.
The class attribute is defined in the style tag using dot(.) symbol followed by class name.
The class name is case-sensitive.
In a single HTML document, you can use the same class with different elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.title{
color: #fff;
background-color: #ff5722;
padding: 5px;
}
.description{
font-size: 20px;
border: 1px solid #ff5722;
padding: 5px;
}
</style>
</head>
<body>
<h2 class="title"> What is HTML? </h2>
<p class="description"> HTML is basically markup language using which you can create your own website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. </p>
</body>
</html>
Try it

Explanation of the above example:

In this example, we have declared classes with the name “.title” and “.description” respectively in the style tag.
Then these classes are used with the HTML elements. The “.title” class is used with <h2> tag and “.description” is used with <p> tag. The properties defined inside the classes are applied to the particular element on which it is used.

Use of Class Attribute on Inline Elements:

You can use the class attribute on inline elements, similarly as we use classes on block elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.title{
color: #fff;
background-color: #ff5722;
padding: 5px;
}
.description{
font-size: 20px;
border: 1px solid #ff5722;
padding: 5px;
}
.important-text{
color: #ff5722;
}
</style>
</head>
<body>
<h2 class="title"> What is HTML? </h2>
<p class="description"> HTML is basically markup language using which you can create your own website. HTML stands for <span class="important-text"> Hypertext Markup Language </span>. It contains elements and the elements are represented by tags. </p>
</body>
</html>
Try it

Multiple Classes:

In HTML you can use multiple classes on a single element.
If you use multiple classes on an element then you just have to separate those classes by a space.

Example:

In this example, all header elements have the same class, and <h1> and <h3> are also styled with the different class names.
<!DOCTYPE html>
<html>
<head>
<style>
.technology {
background-color: #ff5722;
color: white;
padding: 12px;
}
.menu1 {
text-align: center;
}
.menu3 {
text-align: right;
}
</style>
</head>
<body>
<h2 class="technology menu1"> HTML </h2>
<h3 class="technology"> CSS </h3>
<h4 class="technology menu3"> Bootstrap </h4>
</body>
</html>
Try it

Same class with Different Tag:

You can use the same class with different tags like <h1>, <p> and <div> etc. to get the same style.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.technology {
background-color: #ff5722;
color: white;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h2 class="technology "> HTML </h2>
<div class="technology "> HTML is basically markup language using which you can create your own website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. </div>
</body>
</html>
Try it

HTML Class Attribute in JavaScript:

The class attribute can be used with JavaScript to perform a specific task for an element with the specified class named. JavaScript elements can be accessed by using get getElementsByClassName() method.

Example:

When you click the button, color of the all elements with class name “technology” will change.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()"> Click Here </button>
<h2 class="technology"> HTML </h2>
<p> HTML is markup language using which you can create your own website. </p>
<h2 class="technology"> CSS </h2>
<p> CSS is used to define styles of web pages. </p>
<h2 class="technology"> Boostrap </h2>
<p> Boostrap is a CSS framework. </p>
<script>
function myFunction() {
var x = document.getElementsByClassName("technology");
for (var i = 0; i < x.length; i++) {
x[i].style.color = "#ff5722";
}
}
</script>
</body>
</html>
Try it

Ask a Question

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