Classes and IDs are HTML attributes used to identify and style elements. They play a crucial role in applying CSS styles and targeting elements with JavaScript.
HTML Classes
A class is a reusable attribute that applies the same styles or behavior to multiple elements.
Syntax
<tag class="class-name">Content</tag>
Example
<!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>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This paragraph is highlighted.</p>
<p>This paragraph is not highlighted.</p>
<p class="highlight">This is another highlighted paragraph.</p>
</body>
</html>
In this example, the .highlight class applies the yellow background to multiple <p> elements.
Key Points
- Classes can be applied to multiple elements.
- They are defined in CSS with a dot (
.) before the class name (e.g.,.class-name).
HTML IDs
An ID is a unique identifier used to style or target a specific element.
Syntax
<tag id="unique-id">Content</tag>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML IDs Example</title>
<style>
#special {
color: red;
}
</style>
</head>
<body>
<p id="special">This paragraph has a unique style.</p>
<p>This paragraph does not have the special style.</p>
</body>
</html>
In this example, the #special ID applies the red text color to the specific <p> element with that ID.
Key Points
- An ID must be unique within a page.
- They are defined in CSS with a hash (
#) before the ID name (e.g.,#id-name).
When to Use Classes vs. IDs
| Classes | IDs |
|---|---|
| Apply to multiple elements | Apply to a single, unique element |
| Ideal for general styles or reusable styles | Ideal for unique elements (e.g., navigation) |
CSS selector: .class-name |
CSS selector: #id-name |
Combining Classes and IDs
You can use both classes and IDs in the same element for greater control.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes and IDs Combined</title>
<style>
.common-style {
font-size: 18px;
}
#unique-style {
color: blue;
}
</style>
</head>
<body>
<p class="common-style" id="unique-style">This paragraph has both class and ID styles.</p>
</body>
</html>
Targeting with JavaScript
You can target elements by class or ID in JavaScript to manipulate them dynamically.
Target by Class
document.querySelector('.highlight').style.fontWeight = 'bold';
Target by ID
document.getElementById('special').style.fontSize = '24px';
Best Practices
- Use Classes for Styling: Prefer classes when styling multiple elements.
- Use IDs for Unique Elements: Use IDs sparingly for unique elements or JavaScript targets.
- Consistency: Keep class and ID names descriptive and consistent for easier maintenance.
- Avoid Overuse of IDs in CSS: Overuse of IDs can make CSS harder to maintain and less flexible.
Classes and IDs are fundamental for organizing, styling, and scripting HTML elements. Understanding when and how to use them will enhance your ability to build well-structured and easily maintainable webpages.