In this page all uses and syntax of class in HTML is described. The class attribute is used to classifies elements into conceptual groups; Unlike the id attribute, multiple elements may share a class name.(about the id attribute, A complete detail is given in next page) By making elements part of the same class, you can apply styles to all of the labeled elements at once with a single style rule or manipulate them all with a script.
Basic example of Class attribute
<!DOCTYPE html>
<html>
<head>
<style>
.mainArea{
border: 1px solid black;
background: white;
padding: 5px;
}
.heading5{
font-size: 26px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
color: blue;
}
.para1{
font-size: 15px;
color: black;
padding: 5px;
text-align: justify;
}
</style>
</head>
<body>
<div class="mainArea">
<h5 class="heading5">webtags.com.pk</h5>
<p class="para1">
webtags is free course provider website.
Here are complete web development and web designing courses for free
to learn.There is no any condition for registration or login for the user.
</p>
</div>
</body>
</html>
Output of above code
webtags.com.pk
webtags is free course provider website. Here are complete web development and web designing courses for free to learn.There is no any condition for registration or login for the user.
Explanation of above code
As you saw the above example with source, here class attribute is targeted in css to make the document more attractive.(You will learn more about style in css tutorials).Three classes were used in the above document, "mainArea","heading5" and "para1".And separately all classes are targeted in above styling (internal type of styling). When we target the class attribute in css than we use "." (dot) sign before the class attribute.
Note:
If you are willing, don't forget to visit CSS course.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
