Class HTML
The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<h2 class="country">CHINA</h2>
<p>
China has the largest population
in the world.
</p>
<h2 class="country">INDIA</h2>
<p>
India has the second largest
population in the world.
</p>
<h2 class="country">UNITED STATES</h2>
<p>
United States has the third largest
population in the world.
</p>
</body>
</html>
Using the same HTML class attribute in different tags
The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.
<!DOCTYPE html>
<html>
<head>
<style>
.input-field {
padding: 16px;
margin: 11px;
border-radius: 22px;
border: 4px solid #cce;
}
</style>
</head>
<body>
<input type="text" class="input-field" placeholder="First Name">
<br>
<input type="email" class="input-field" placeholder="Last Name">
</body>
</html>
The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>