(PDF) HTML Class Attribute with Example :- Infinity4Education
HTML The class Attribute
The
HTML class attribute
is used to define equal styles for elements with the same class name.
Using The class
Attribute
All
HTML elements with the same class attribute will get the same style.
Here
we have three <div> elements that point to the same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Using The class
Attribute on Inline Elements
The
HTML class attribute
can also be used on inline elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Tip: The class attribute can be used on any HTML
element.
Note: The
class name is case sensitive!
Select Elements With
a Specific Class
In
CSS, to select elements with a specific class, write a period (.) character,
followed by the name of the class:
Example
Use CSS to style all elements with the class name
"city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Multiple Classes
HTML
elements can have more than one class name, each class name must be separated
by a space.
Example
Style elements with the class name
"city", also style elements with the class name "main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
In
the example above, the first <h2> element belongs to both the "city"
class and the "main" class.
Different Tags Can
Share Same Class
Different
tags, like <h2> and <p>, can have the same class name and thereby share
the same style:
Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
<p class="city">Paris is the capital of France</p>
Using The class
Attribute in JavaScript
The
class name can also be used by JavaScript to perform certain tasks for elements
with the specified class name.
JavaScript
can access elements with a specified class name by using the getElementsByClassName() method:
Example
When a user clicks on a button, hide all elements
with the class name "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Comments
Post a Comment