HTML Classes

By | January 9, 2020

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:-

heading

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:-

heading

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:-

heading

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:-

heading
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *