HTML The class Attribute
- The class is an attribute which specifies one or more class names for an HTML element.
- The class attribute can be used on any HTML element.
- The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
Example
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Delhi</h2>
<p>Delhi is the capital of India.</p>
</body>
</html>
Using The class Attribute on Inline Elements
The HTML class attribute can also be used on inline.
Note:- The class name is case sensitive!
Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a space.
Example
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Multiple Classes</h2>
</body>
</html>
Different Tags Can Share Same Class
Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.
Example
<html>
<head>
<style>
.city {
background-color: cyan;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h2>Same Class, Different Tag</h2>
</body>
</html>
Try it »