We have learnt about HTML Id, there is some advantage with id like uniqueness, but in case if we want same style for many elements then we have to define unique id for each element and much more CSS code. To solve this problem the concept of HTML Class introduced.
The HTML class attribute is used to define equal styles for elements with the same class name. So, all HTML elements with the same class attribute will have the same format and style.
Using The class Attribute
- HTML Class is used to define similarity of HTML Elements.
- HTML Class is an attribute of HTML element.
- More than one HTML elements can have same HTML Class and one element can have more than one HTML Class.
Below is the simple syntax for HTML Class:
HTML Class Syntax
<tag_name class="class_name"> All content goes here, you can write </tag_name>
Why HTML Class
HTML Class is designed to provide more flexibility for engaging with CSS and JavaScript. With the help of HTML Class we can reduce thousand line of CSS or JavaScript code in few line, we will understand it in a bit. First let’s take an example of HTML Class.
HTML Class Example
<p class="myNewP"> Hi, I'm a paragraph with class name myNewP </p>
Keep in Mind
There are few things to know while working with HTML Class. Take a proper look to below mentioned points
- HTML Class Name is case-sensitive.
- A HTML Element can have more than one class.
- More than one HTML Element can have same Class Name.
- No space allowed in HTML Class Name.
Single Element with multiple Class Name Example
<p class="myNewP1 p_details"> This paragraph have 2 class named as myNewp1 and p_details </p>
Multiple Element with Single Class Name Example
<p class="p_all p1"> hello this paragraph first with class p_all and p1 </p>
<p class="p_all"> I have a class p_all, i'm second paragraph. </p>
<a class="p_all"> Hello this a tag, I also have p_all class </p>
Difference between HTML Class and HTML Id
There are two major differences between HTML Class and HTML Id.
- An HTML Id should be unique throughout entire web page but in case of HTML Class it’s not compulsory means two or more element can have same class name.
- A HTML Element can have only one Id, while a HTML element can have more than one class name.
Use of HTML Class with CSS
We can do the best use of HTML Class with CSS basically HTML Class is designed for use with CSS but we can use it some other way to. While writing CSS property we always use .class_name. Let’s see how we can make use HTML Class with CSS in best way.
Class Example with CSS
<head>
<style type="text/css">
.p1{
color:brown;
font-size:17px;
}
.p2{
color:aqua;
font-size:17px;
font-weight:600;
}
</style>
</head>
<body>
<p class="p1"> p tag with class name p1 </p>
<p class="p2"> I'm also p tag, but class is p2 </p>
</body>
Output
p tag with class name p1
I'm also p tag, but class is p2
Note : we can define single piece of CSS code for multiple HTML Element which have same class name. See below example to know how.
Class Example with CSS
<head>
<style type="text/css">
.hello_p{
font-size:15px;
line-height:27px;
color:#00758F;
font-weight:700;
}
</style>
</head>
<body>
<p class="hello_p"> p tag_1 </p>
<p class="hello_p"> p tag_2 </p>
<p class="hello_p"> p tag_3 </p>
<p href="#" class="hello_p"> a tad_1 </a>
</body>
Output
p tag_1
p tag_2
p tag_3
a tag_1
Use of HTML Class with JavaScript
In same way as HTML Id we can also use HTML Class with JavaScript code in efficient way. With the help of HTML Class we can target more than one element to make some change at a time using JavaScript. Let’s see how we can use HTML Class with JavaScript in below example.
Class Example with JavaScript
<head>
<script type="text/javascript">
function changeColorNow();{
var my_element = document.getElementsByClassName("ch_p")[0];
my_element.style.color = "brown";
}
</style>
</head>
<body>
<input type="button" onclick= "changeColorNow();" name="ok" value ="Click Me to See" />
<p class="ch_p">My text color is going to chage </p>
</body>