7/18/20

HTML CLASS : Full Example Explained.


In Html, Class is an attribute used to specify one or more class names of an Html document. You can use multiple class names in the different elements of the Html. You can style your Html element yourself by giving the class and with the help of CSS attributes. You can also script your Html element by giving it class and with the help of JavaScript.

Let us understand this with the help of an example.


<html>
<head>
<title> Example of Html Class </title>
<style>
.heading {
font-size: 30px;
background-color: lightgreen;
color: Red;
border: 2px solid black;
}
.para {
font-size: 25px;
background-color: lightskyblue;
color: Yellow;
border: 2px solid black;
}
.container {
font-size: 35px;
background-color: lightcoral;
color: blue;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 class="heading"> This is a Heading. </h1>
<p class="para"> This is a Paragraph. </p>
<div class="container">
This is a container and div element
</div>
</body>
</html>

Output:-



Example of class name in multiple html elements. 

<html>
<head>
    <title> Example of Html Class </title>
<style>
.heading {
font-size : 26px;
color : red;
background-color : lightyellow;
border: 2px solid orange;
</style>
</head>
<body>
<h1 class = "heading"> This is a Heading 1 Tag. </h1>
<h2 class = "heading"> This is a Heading 2 Tag. </h2>
<h3 class = "heading"> This is a Heading 3 Tag. </h3>
<h4 class = "heading"> This is a Heading 4 Tag. </h4>
</body>
</html>

Output:- 



Explanation: - In this example, we have given the same class name to all the heading tags (h1, h2, h3 & h4) which are the “heading”.  Now if we select “heading” class name in our style sheet and style anything, it will be applied in every tag whose class name was heading.

Adding JavaScript on the Html elements

Example:-

<html>
<head>
    <title> Example of Html Class </title>
<script>
        function myFunction() {
            var x = document.getElementsByClassName("heading");
            for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
        }
    </script>
<style>
.heading {
font-size : 26px;
color : red;
background-color : lightyellow;
border: 2px solid orange;
</style>
</head>
<body>
 <p>Click the button, and JavaScript hides all 
       elements with the class name "heading". </p>
<button onclick="myFunction()">Hide elements</button>
<h1 class = "heading"> This is a Heading 1 Tag. </h1>
<h2 class = "heading"> This is a Heading 2 Tag. </h2>
<h3 class = "heading"> This is a Heading 3 Tag. </h3>
<h4 class = "heading"> This is a Heading 4 Tag. </h4>
</body>
</html>


Output:- 




Explanation:- In this example, we have applied a simple javascript that can hide all the elements name “heading”. When someone clicks on the button all the element names have heading can hide.

So that it for today guys if you have any quarries related to this comment down. I hope you like the article and the Html series. Follow us on my social media handles. Keep visiting here for more computer knowledge.

Thanks for Visiting Here

Have a good day you all.

You May Also Like




"+y+""}else{if(A==5){c+='
  • '+w+""+y+"
  • "}else{if(A==6){c+='
  • "+w+'
    '+u+""+y+"
  • "}else{c+='
  • "+w+"
  • "}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    0 comments:

    Post a Comment

    Follow on Twitter

    Linkedin

    Categories

    Blog Archive

    Contact Form

    Name

    Email *

    Message *

    Mad About Computer. Powered by Blogger.
    This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: "d e n a c c 9 7 7 (at) g m a i l (dot) c o m" (delete spaces) or you can find and buy it on Afternic domain auctions.