-
Hajipur, Bihar, 844101
HTML Classes
HTML classes are one of the most important attributes for organizing and styling web content. They allow you to assign a name to an element or a group of elements so that you can apply consistent styling using CSS or target them with JavaScript. Unlike IDs, which must be unique, classes can be used on multiple elements, making them ideal for reusable styles and dynamic functionality. This tutorial will explain everything you need to know about HTML classes, including syntax, multiple classes, styling, best practices, and practical examples.
What is an HTML Class
A class is an attribute of an HTML element. It acts as a label that you can use to select one or more elements in CSS or JavaScript. Using classes allows you to keep your code modular, maintainable, and consistent.
Syntax of a Class
<tag class="class-name">Content</tag>
Example:
<p class="highlight">This paragraph is highlighted using a class.</p>
Here, the paragraph element has a class called highlight. You can now style it or manipulate it without affecting other paragraphs that don’t have this class.
Difference Between Class and ID
| Feature | Class | ID |
|---|---|---|
| Uniqueness | Can be used on multiple elements | Must be unique on a page |
| CSS Selector | .classname |
#idname |
| Purpose | Apply same style or behavior to many elements | Identify one specific element |
Classes are best for reusable styles, while IDs are for unique elements.
Assigning a Class to an Element
You can assign a class to almost any HTML element, including <div>, <p>, <span>, <ul>, <li>, <button>, <img>, and more.
Example
<div class="card">
<h2>Card Title</h2>
<p>This is a sample card using a class.</p>
</div>
<p class="card">This paragraph also uses the same class.</p>
Both the div and paragraph have the class card, so you can apply the same style to both.
Using Multiple Classes
An element can have more than one class. This allows you to combine multiple styles without duplicating code.
Example of Multiple Classes
<p class="card highlight">This paragraph has two classes.</p>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
The paragraph inherits styles from both card and highlight. This modular approach makes code maintainable and flexible.
Selecting Classes in CSS
You select a class in CSS using a period . followed by the class name.
Example
<style>
.highlight {
color: blue;
font-style: italic;
}
</style>
<p class="highlight">This text is blue and italic.</p>
You can target any number of elements with the same class using a single CSS rule.
Classes and JavaScript
Classes are extremely useful for selecting and manipulating multiple elements using JavaScript.
Example: Changing Text
<p class="info">Original text 1</p>
<p class="info">Original text 2</p>
<script>
const elements = document.getElementsByClassName("info");
for (let i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Updated text via class!";
}
</script>
All elements with the class info are updated, showing the power of classes in dynamic webpages.
Adding or Removing Classes Dynamically
You can also add or remove classes dynamically using JavaScript.
<p id="text">Click the button to highlight me</p>
<button onclick="toggleHighlight()">Click Me</button>
<script>
function toggleHighlight() {
const element = document.getElementById("text");
element.classList.toggle("highlight");
}
</script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
Clicking the button adds or removes the highlight class dynamically.
Best Practices for Classes
-
Use descriptive names – Choose names that reflect the purpose, not the appearance. For example,
.btn-primaryinstead of.blue-button. -
Reusability – Use classes to style multiple elements rather than repeating inline styles.
-
Combine wisely – You can combine multiple classes but avoid unnecessary complexity.
-
Follow naming conventions – Use a consistent naming convention like BEM (Block Element Modifier) for larger projects.
Example: BEM Naming
<div class="card card--featured">
<h3 class="card__title">Featured Card</h3>
</div>
Here, card is the block, card--featured is a modifier, and card__title is an element inside the block. This naming method improves readability and maintainability.
Common Mistakes with Classes
-
Using the same ID for multiple elements instead of a class – IDs are meant for unique elements.
-
Overusing inline styles instead of classes – Inline styles are harder to maintain and less flexible.
-
Using meaningless class names – Names like
.blueor.big-textmake the code less reusable. -
Adding too many classes unnecessarily – Keep it minimal and modular.
Summary of HTML Classes
HTML classes are essential for styling, organizing, and manipulating multiple elements on a webpage. They allow you to assign names to elements, apply consistent styles using CSS, and interact with them using JavaScript. You learned how to assign single and multiple classes, use them in CSS, manipulate them dynamically with JavaScript, and follow best practices. Classes make your code cleaner, maintainable, and flexible, which is why mastering them is key for any web developer.
Practice Questions
Q1. Create a paragraph with a class that changes text color to blue.
Q2. Add a box class to a <div> and apply border and padding.
Q3. Style multiple <p> elements using the same class.
Q4. Apply two different classes (red, bold) to a heading.
Q5. Target a class in JavaScript to change its content.
Q6. Create a card layout using .card and .card-title classes.
Q7. Use CSS to style a class .warning with red text and border.
Q8. Add a class to a <ul> and change its bullet style.
Q9. Write a button that toggles a class on click using JavaScript.
Q10. Create a class .centered to center-align any content.
