The HTML class attribute is used to group several elements into a class inorder to apply a specific
CSS style to all member elements belonging to the class.
It is possible for an element to belong to multiple classes.
Syntax of belonging to a class/defining a class:
<element tag name class="classname"> content </element>
To belong to 2 classes:
<element tag name class="classname1 classname2"> content </element>
Syntax of applying style to a class. Notice the selector of the class which is a period i.e. dot before the class name:
<head>
<style>
.sampleclassname {
property1: value;
property2: value;
}
</style>
</head>Try this out. Watch the change in styles in the case of all 3 div elements in your browser:
<html>
<head>
<style>
.firstclass {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div class="firstclass">
<h2>First class first instance</h2>
</div>
<div class="firstclass">
<h2>First class second instance</h2>
</div>
<div class="secondclass">
<h2>This is the second class so expect a different style here</h2>
</div>
</body>
</html>