What Is HTML Class? The class Attribute tutorial

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing What Is HTML Class? The class Attribute tutorial

What Is HTML Class

What is an HTML class? well, the class is an attribute in HTML which selects a single element or an element group for add style or extra event in JavaScript.

  • You can add the same class name on different elements.
  • you can add multiple class name one single element by adding a space

HTML Class Attribute – With CSS

In CSS class attribute represents the (.) symbol. And you can style multiple classes at once, just write the class names by adding a (,) comma.

<!DOCTYPE html>
<html>
<style>
.para1{
 color:green;
}
</style>
<head>
</head>
<body>
<p class="para1">This is a paragraph</p>
</body>
</html>

Result

This is a paragraph

Style multiple elements by adding the same class name

You can style different or same elements at once by adding the same class name.

<!DOCTYPE html>
<html>
<style>
.test{
 color:yellow;
}
</style>
<head>
</head>
<body>
<h1 class="test">Heading</h1>
<p class="test">This is a paragraph</p>
<p class="test">This is also a paragraph</p>
</body>
</html>

Result

Heading

This is a paragraph

This is also a paragraph

Style different class names at once

You can style different class at once by adding a (,) comma.

<!DOCTYPE html>
<html>
<style>
.myheading, mypara{
 color:orange;
}
</style>
<head>
</head>
<body>
<h1 class="myheading">Heading</h1>
<p class="mypara">This is a paragraph</p>
<p class="mypara">This is also a paragraph</p>
</body>
</html>

Results

Heading

This is a paragraph

This is also a paragraph

One Element Can Contain More Than One Class Name

An HTML element can contain more than one class name. It helps you for better styling a element.

<!DOCTYPE html>
<html>
<style>
.para{
 color:orange;
}
.1stpara{
background-color:black;
}
</style>
<head>
</head>
<body>
<p class="para 1stpara">This is a paragraph</p>
<p class="para">This is also a paragraph</p>
</body>
</html>

Result

This is a paragraph

This is also a paragraph

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply