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:-<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>
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>
<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:-
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>
<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
- HTML:- BLOCK AND INLINE ELEMENTS
- HTML TABLES :- Elements and Attributes
- HTML LIST:- Ordered List, Unordered List, Description List
- HTML IMAGES :- INSERT AN IMAGE IN HTML DOCUMENT
- HTML LINKS : ( Visited, Unvisited, Images as a Link )
0 comments:
Post a Comment