Introduction
In this chapter, you will learn about the HTML class
attribute, which is used to define a class for an HTML element.
What is the class Attribute?
The class
attribute specifies one or more class names for an HTML element. Class names can be used in CSS to apply styles to elements and in JavaScript to manipulate elements.
Syntax
<element class="class-name">Content goes here.</element>
Adding Multiple Classes
You can assign multiple classes to an element by separating the class names with a space.
Example
<element class="class1 class2 class3">Content goes here.</element>
Styling with CSS
You can use the class
attribute to apply CSS styles to specific groups of elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Attribute Example</title>
<style>
.red-text {
color: red;
}
.bold-text {
font-weight: bold;
}
</style>
</head>
<body>
<p class="red-text">This text is red.</p>
<p class="bold-text">This text is bold.</p>
<p class="red-text bold-text">This text is red and bold.</p>
</body>
</html>
Selecting Elements with JavaScript
The class
attribute can also be used to select and manipulate elements with JavaScript.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Attribute Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
function highlightText() {
var elements = document.getElementsByClassName('highlight');
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = 'blue';
}
}
</script>
</head>
<body>
<p class="highlight">This text will be highlighted.</p>
<p>This text will not be highlighted.</p>
<p class="highlight">This text will also be highlighted.</p>
<button onclick="highlightText()">Highlight Text</button>
</body>
</html>
Real-World Use Case: Creating a Card Layout
A common use case for the class
attribute is creating a card layout where each card shares common styles but contains different content.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Layout Example</title>
<style>
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.card h2 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title 1</h2>
<p>This is some text inside a card.</p>
</div>
<div class="card">
<h2>Card Title 2</h2>
<p>This is some more text inside another card.</p>
</div>
<div class="card">
<h2>Card Title 3</h2>
<p>This is yet another piece of text inside a card.</p>
</div>
</body>
</html>
Conclusion
The HTML class
attribute is used for grouping elements for styling with CSS and for selection with JavaScript. By using the class
attribute, you can apply consistent styles and behaviors across multiple elements, making your web pages more organized and easier to manage. Understanding how to use the class
attribute effectively is essential for modern web development.