HTML Class

HTML HTML Class Html Class Attribute

Html Class Attribute

This attribute is used to apply same set of styles to elements with same class name. This attribute is used to point a class in style sheet. You can apply class to one or more elements as you want.

Example:-

<html>
<head>
	<style>
.student{
    background-color: green;
    color: white;
    font-size:22px;
padding:5px;
} 
       </style>
</head>

<body>

<div class="student">
<h1>Ali</h1>
<p>passed examination and got first position.</p>
</div>

<div class="student">
<h1>Ahmed</h1>
<p>passed examination and got second position.</p>
</div>

</body>


</html>

Output:-

Ali

passed examination and got first position.

Ahmed

passed examination and got second position.

Different HTML Tags can Use Same Class

Different Html tags can use same same class to display content in same style. In example below Heading1 and paragraph tags are using same class.

Example:-

<style>
.color-white{
    background-color: green;
    color: white;
    padding:5px;
} 
</style>

<h1 class="color-white">Ahmed</h1>

<p class="color-white">passed examination and got second position.</p>

Output:-

Ahmed

passed examination and got second position.

Html Tag Using Different Class

An Html tag can use different classes at the same time. There should be space between each class name.

Example:--

<style>
.back-color{
    background-color: red;
    color: white;
    padding:5px;
} 
.text-color
{
color: white;
}
.font-bold{
font-weight:bolder;
}
</style>

<div class="back-color text-color font-bold">
<h1>Ahmed</h1>
<p>passed examination and got second position.</p>
</div>

Output:-

Ahmed

passed examination and got second position.

HTML Html Class Attribute Chapter Next »