There are many types of content in HTML, which we can divide into classes to separate them. By giving a class to any content of HTML, we can make it CSS. We can use the same bean class with different elements of the matrix. (.) before class is used within <style> tag.
<tag class="classname"></tag><h1 class="heading">This is h1 Heading</h1>In the above example, <h1> is a heading, in which we have given the class name Heading, by which we can change its style. To style, we write <style> in the head tag, in which the target of the class is something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.heading{
color: red;
}
</style>
</head>
<body>
<h1 class="heading">This is h1 Heading</h1>
</body>
</html>
In <h1> in the above example, we have taken a class heading which is targeted and styled the heading whose output will be something like this…
Output:-
We can use the same bean class in many elements of HTML in this way.
<!DOCTYPE html>
<html>
<head>
<style>
.heading{
color: red;
}
</style>
</head>
<body>
<h1 class="heading">This is h1 Heading</h1>
<h2 class="heading">This is h2 Heading</h2>
<p class="heading">Lorem ipsum dolor sit amet.</p>
</body>
</html>
Output:-
Multiple Classes:-
We can use different classes in different elements of HTML in this way.
<!DOCTYPE html>
<html>
<head>
<style>
.class_one{
color: red;
}
.class_two{
background: black;
color: #fff;
}
.class-three{
font-style: italic;
}
</style>
</head>
<body>
<h1 class="class_one">This is h1 Heading</h1>
<h2 class="class_two">This is h2 Heading</h2>
<p class="class-three">Lorem ipsum dolor sit amet.</p>
</body>
</html>
Output:-
We can put the class in the Inline element in HTML in this way.
<!DOCTYPE html>
<html>
<head>
<style>
.class_one{
color: red;
font-style: italic;
}
</style>
</head>
<body>
<h1>This <span class="class_one">is h1 </span>Heading</h1>
</body>
</html>Output:-
