- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML class
Different Elements Can Share Same Class
The same class name can be pointed to by several HTML elements.
Both <h2>
and <p>
in the example below point to the "city"
class and use the same style:
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>
<h2 class="city">Delhi</h2>
<p class="city">Delhi is the capital of India.</p>
</body>
</html>
Use Of The Class Attribute In JavaScript
JavaScript may also use the class name to carry out specialised functions for particular elements.
JavaScript's getElementsByClassName()
API allows you to obtain elements that belong to a particular class:
<html>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">Delhi</h2>
<p>Delhi is the capital of India.</p>
<h2 class="city">Patna</h2>
<p>Patna is the capital of Bihar.</p>
<h2 class="city">Locknow</h2>
<p>Locknow is the capital of UP.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
HTML Class Attribute
An HTML element's class can be specified using the class attribute.
The same class might apply to several HTML elements.
The class attribute is used
When referencing a class name in a style sheet, the class attribute is frequently utilised. Additionally, a JavaScript can utilise it to interact with elements that have the specified class name.
The class attribute in the following example's three <div><
components has the value "city." According to the.city style specification in the head section, each of the three <div>
components will have a same style:
<html>
<head>
<style>
.city {
background-color: red;
color: white;
border: 3px solid black;
margin: 30px;
padding: 30px;
}
</style>
</head>
<body>
<div class="city">
<h2>Delhi</h2>
<p>Delhi is the capital of india.</p>
</div>
<div class="city">
<h2>Lucknow</h2>
<p>Lucknow is the capital of UP.</p>
</div>
<div class="city">
<h2>Patna</h2>
<p>Patna is the capital of Bihar.</p>
</div>
</body>
</html>
The Syntax For Class
Write a period (.) character, then the class name, to create a class. After that, specify the CSS properties inside curly braces:
<html>
<head>
<style>
.city {
background-color: red;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<h2 class="city">Delhi</h2>
<p>Delhi is the capital of india..</p>
<h2 class="city">Lucknow</h2>
<p>Lucknow is the capital of UP.</p>
<h2 class="city">Patna</h2>
<p>Patna is the capital of Bihar.</p>
</body>
</html>
Multiple Classes
Multiple classes are possible for HTML elements.
<div class="city main">
is an example of how to define multiple classes by separating them with spaces. All of the supplied classes will be used to style the element.
The first <h2>
element in the example below belongs to the city class as well as the main class, and will inherit the CSS styles from both classes:
<html>
<head>
<style>
.city {
background-color: red;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">Lucknow</h2>
<h2 class="city">Delhi</h2>
<h2 class="city">Patna</h2>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP