HTML classes are used to group elements for styling and scripting purposes. By assigning a class attribute to HTML elements, you can apply specific styles and behaviors to those elements using CSS and JavaScript.
Syntax
To add a class to an HTML element, use the class
attribute:
<tag class="class-name">Content</tag>
Benefits of Using Classes
Reusability: Apply the same styles to multiple elements by using the same class name.
Maintainability: Easily update styles in one place by modifying the CSS for a class.
Organization: Helps to keep the HTML structure organized and readable.
JavaScript Targeting: Classes can be used to select and manipulate elements with JavaScript.
Example
Here’s an example demonstrating how to use classes in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Classes Example</title>
<style>
.header {
background-color: blue;
color: white;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
background-color: lightgrey;
}
.footer {
background-color: blue;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header Section</h1>
</div>
<div class="content">
<p>This is the main content area.</p>
</div>
<div class="footer">
<p>Footer Section</p>
</div>
</body>
</html>
Explanation of the Example
- HTML Structure: The HTML document includes three main sections: header, content, and footer.
- Class Assignment: Each section is assigned a class (
header
,content
,footer
) using theclass
attribute. - CSS Styling: In the
<style>
block, each class is styled:.header
: Blue background, white text, padding, and center-aligned text..content
: Light grey background and padding..footer
: Similar styling to the header.
Multiple Classes
An element can have multiple classes, separated by spaces:
<div class="class1 class2">Content</div>
This allows for combining different styles and behaviors for a single element.
Example with Multiple Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Classes Example</title>
<style>
.highlight {
background-color: yellow;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<p class="highlight italic">This paragraph is highlighted and italicized.</p>
</body>
</html>
In this example, the paragraph is both highlighted and italicized by combining the highlight
and italic
classes.