Class attribute in HTML

In this page all uses and syntax of class in HTML is descirbed. 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.

Following HTML class attribute is given

<!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 webdevelopment 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 webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.

Explaination 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 seperately 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.

If you are willing donot 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.


add