The Class Attribute in Html
By Rosy BiswalHello everyone!!!
Here we will know about the class attributes in Html. It is used to subdivide the content into different headers and the subdivision will get the same style under this attribute. The class name is case-sensitive in nature.
Let’s look at an example that will brief about this attribute.
Start your code with the necessary tags:
<html>
<head>
<style>
.codespeedy {
background-color: yellow;
color: black;
margin: 50px;
padding: 50px;
}
</style>
</head>
<body>
<div class="codespeedy">
<h2> Technology </h2>
<p>Coding is too much fun.</p>
</div>
</body>
</html>In the above code, we include a Style tag to specify CSS styling rules like border, background, color, font, etc.
Select elements through the class attribute.
Now, look at an example in which we can add CSS to styles to all elements through the class name.
<style>
.codespeedy{
background-color: yellow;
color: black;
padding: 10px;
}
</style>
<h2 class="codespeedy"> Technology </h2>
<p>Coding is too much fun.</p>
In the above code, we get the output of the required style in the header name only.
Applying multiple classes
Here, look at an example where HTML elements have a different class name.
<html>
<style>
.codespeedy {
background-color: yellow;
color: black;
padding: 20px;
}
.tech {
text-align: left;
}
</style>
<body>
<h2 class="codespeedy tech"> Technology</h2>
<h2 class="codespeedy">coding is fun</h2>
<h2 class="codespeedy">Developing is fun</h2>
</body>
</html>
Different tags with the same class – Class attribute
Let us have a code that includes different tags with the same class.
<html>
<style>
.codespeedy {
background-color: yellow;
color: black;
padding: 20px;
}
</style>
<body>
<h2 class="codespeedy">Technology</h2>
<p class="codespeedy">Code is fun.</p>
</body>
</html>These were the few examples that give a brief about the basic concepts of the class attribute we use in Html language. The summarization also involves the uses of the class attribute.
Leave a Reply