HTML Class Attribute
The HTML class attribute is used to assign one or more CSS classes to an HTML element. By using classes, you can group elements together and apply consistent styles across them, streamlining both design and functionality.
HTML class attribute Supported Tags: It supports all HTML elements.
Syntax
<tag class="classname"></tag>Examples of HTML Class Attribute
Here is a basic example of an HTML Class Attribute
1. Using the Same Class in Multiple HTML Tags
The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.
Example: This example shows the use of the classes in HTML.
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<h2 class="country">CHINA</h2>
<p>
China has the largest population
in the world.
</p>
<h2 class="country">INDIA</h2>
<p>
India has the second largest
population in the world.
</p>
<h2 class="country">UNITED STATES</h2>
<p>
United States has the third largest
population in the world.
</p>
</body>
</html>
Output:
Same Class in Multiple HTML Tags
Explanation:
- In the above example each heading (<h2>) is assigned the class “country” using the class attribute.
- The CSS selector .country targets multiple elements with the class “country” to apply styling.
- Styling defined for the “country” class is applied uniformly to all headings tagged with it.
- Using class attributes ensures consistent styling across headings, simplifying design management.
2. Using Multiple Classes on a Single Element
HTML allows an element to have multiple classes by separating class names with spaces. This enables a more modular and flexible approach to styling, where an element can share common styles but also have unique styles.
Example: In this example, we will use more than one class.
<!DOCTYPE html>
<html>
<head>
<style>
.country {
color: white;
padding: 10px;
}
.china {
background-color: black;
}
.india {
background-color: blue;
}
.usa {
background-color: red;
}
center {
padding: 20px;
}
</style>
</head>
<body>
<center>
<h2 class="country china">CHINA</h2>
<h2 class="country india">INDIA</h2>
<h2 class="country usa">UNITED STATES</h2>
</center>
</body>
</html>
Output:
HTML class attribute multiple classes
Explanation:
- In the above example <h2> elements are assigned the “country” class for shared styling attributes.
- Additional classes like “china”, “india”, and “usa” provide unique background colors.
- Classes set background colors to black, blue, and red, with white text and padding for visual contrast.
- The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page.
HTML Class Attribute – FAQs
Can an HTML element have multiple class names?
Yes, an element can have multiple class names. Just separate each class name with a space, like this: <div class=”class1 class2″>.
Can I use the class attribute with JavaScript?
Yes, the class attribute can be used with JavaScript to manipulate elements, for example, by using document.getElementsByClassName(‘classname’) or document.querySelectorAll(‘.classname’) to select elements with a specific class.
How do I add or remove a class from an element using JavaScript?
You can add or remove a class using JavaScript with the classList property, like this: element.classList.add(‘newClass’) or element.classList.remove(‘oldClass’).
Is the class attribute case-sensitive?
No, the class attribute itself is not case-sensitive, but CSS class names are case-sensitive, so you should use consistent capitalization.
Can I use the class attribute on any HTML element?
Yes, the class attribute can be applied to any HTML element, allowing for consistent styling or behavior across different parts of a webpage.
