HTML Classes
Class Attribute in 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 dot(.) character, followed by the name of the class for selecting elements.
A class attribute can be defined within <style> tag or in separate file using the (.) character.
In an HTML document, we can use the same class attribute name with different elements.
We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to provide such styling. We just need to follow the following syntax to use it.
<tag class="ghf"> content </tag>
Example
<!DOCTYPE html>
<html>
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head><body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>
This is first heading On TopBlog Pk
This is Second heading On TopBlog Pk
This is third heading On TopBlog Pk
This is fourth heading On TopBlog Pk
Another Example with different class name
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head><body>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
</body>
</html>
Mango
Mango is king of all fruits.
Orange
Oranges are full of Vitamin C.
Apple
An apple a day, keeps the Doctor away.
🔺You can use class attribute on any HTML element. The class name is case-sensitive.
Multiple Classes
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
.center {
text-align: center;
}
</style><body>
<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>
<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>
</body>
</html>
Multiple Classes
All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.
Mango
Orange
Apple
Same class with Different Tag
output:<!DOCTYPE html><html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>
Same Class with Different Tag
Mango
Mango is the king of all fruits.
