HTML class Attribute
The class attribute sets a class for an HTML element. Several elements can share the same class.
The class Attribute
The class attribute usually points to a class name in a style sheet, so the element gets that style. It can also be used by JavaScript to find and change elements with a given class. Several elements with the same class are all styled the same way.
Tip: The class attribute can be used on any element. Note: The class name is case sensitive.
Three divs with a class
Three divs sharing the city class, all styled the same.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Two spans with a class
Two spans sharing the note class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.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>
The Syntax For Class
To make a class, write a period (.) followed by the class name, then put the CSS properties inside curly braces.
Example
Defining and using a class named city.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
Multiple Classes
An element can belong to more than one class. Separate the class names with a space (for example, a city class and a main class together), and the element gets the styles from all of them.
Example
An element with two classes getting styles from both.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Different Elements Can Share Same Class
Different elements can use the same class name and share its style.
Example
An <h2> and a <p> sharing the city class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
</body>
</html>
Use of the class Attribute in JavaScript
JavaScript can use the class name to work with specific elements. The getElementsByClassName() method finds all elements with a given class.
Don't worry if the code is unfamiliar; you will learn more in the HTML JavaScript chapter.
Example
A button that hides all elements with the city class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Click the button to hide all elements with the class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Chapter Summary
To recap: the class attribute sets one or more class names for an element. Classes are used by CSS and JavaScript to select elements, can be used on any element, and the class name is case sensitive. Different elements can share a class, and JavaScript can reach them with getElementsByClassName().