HTML class attribute

Html class attribute is used to style the content that is inside other HTML elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.style{
	font-size:20px;
	font-transform:uppercase;
	color:white;
	background-color:lightgreen;
}
</style>
</head>
<body>
	<div class="style">This is the division element. Its background-color is light green and the font size of text is 20px. The color of text is blue. Here, the class attribute is being used that styles the div element.</div>
</body>
</html>
Try </>

class attribute values

The value of the class attribute is simple text that is obtained from the style tag. In the above example, the text after a full stop (.style) in the style tag is the value of the class attribute.

More than one class names are written in the value of class attribute separated by spaces.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.style1{
	font-size:20px;
	font-transform:uppercase;
	
}
.style2{
	color:blue;
	background-color:lightgreen;
}
</style>
</head>
<body>
	<div class="style1 style2">This is the division element. Its background-color is light green and the font size of text is 20px. The color of text is blue. Here more than one class names are being used that styles the div element.</div>
</body>
</html>
Try </>

Related Tags

class attribute can be applied on all HTML elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.anyname{
	width:100%;
	height:200px;
	border:1px solid black;	
}
</style>
</head>
<body>
	<article class="anyname">
	This is an article that has 100% width and 200px height. The widht of border is 1px. The color of border is black. See one more example for another element.
	</article>
</body>
</html>
Try </>


Was this article helpful?

 

Email:

Message:

Get the newsletter