HTML Class Attribute

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class name.

Note: Classes are mainly used for CSS styling and JavaScript manipulation.

Using the Class Attribute

The class attribute points to a class name defined in CSS.

<style>
.mycolor{
    color:red;
}
</style>

<div class="mycolor">
   <h2>Patna</h2>
   <p>Patna is the capital of Bihar.</p>
</div>

<div class="mycolor">
   <h2>New Delhi</h2>
   <p>New Delhi is the capital of India.</p>
</div>

Purpose of Class

Apply same styling to multiple elements.
Group related elements together.
Access elements using JavaScript.

Multiple Classes

<p class="red bold center">
Welcome to Soopro Pathshala
</p>

You can assign multiple class names separated by spaces.

CSS Usage

.red{
   color:red;
}

.center{
   text-align:center;
}

A class selector starts with a dot (.).

JavaScript Usage

document.getElementsByClassName("mycolor");

JavaScript can access and manipulate all elements having the same class.

Key Points About HTML Classes

Purpose: Assign one or more class names to an element.
Multiple Classes: Separate class names using spaces.
Case Sensitive: header and Header are different.
CSS Usage: Access using .classname.
JavaScript Usage: Access using getElementsByClassName().
Reusable: Same class can be used on many elements.
Frameworks: Bootstrap, React and Angular heavily use classes.

🧠 Quiz

Which symbol is used before a class name in CSS?

.
#
@

← Previous Next →

HTML Tutorial

HTML Class Attribute

Key Points About HTML Classes

🧠 Quiz