HTML classes are used to apply CSS styles to multiple elements with the same class name.
They allow for efficient styling and JavaScript interactions without modifying each element individually.
What This Tutorial Covers:
- What is an HTML class
- How to add a class to an HTML element
- Using multiple classes
- Styling classes with CSS
- Selecting classes with JavaScript
- Best practices for using classes
1. What is an HTML Class?
A class is an attribute that can be added to any HTML element to group elements together for styling or scripting.
Example:
<p class="highlight">This is a highlighted paragraph.</p>
- The class name is highlight.
- It can be styled using CSS or manipulated with JavaScript.
2. Adding a Class to an HTML Element
To add a class, use the class attribute inside an HTML element.
Example:
<p class="intro">Welcome to our website.</p>
This paragraph belongs to the “intro” class.
3. Using Multiple Classes
You can assign multiple classes to an element by separating class names with spaces.
Example:
<p class="highlight bold-text">This text is bold and highlighted.</p>
- highlight applies one style.
- bold-text applies another.
- Both styles combine for the same element.
4. Styling Classes with CSS
CSS allows styling all elements that have a specific class.
Example:
<style>
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
<p class="highlight">This text has a yellow background.</p>
- .highlight selects all elements with this class.
- The background color and padding apply to all elements with class=”highlight”.
5. Applying CSS to Multiple Classes
You can apply different styles to elements with multiple classes.
Example:
<style>
.highlight {
background-color: yellow;
}
.bold-text {
font-weight: bold;
}
</style>
<p class="highlight bold-text">This text is bold and highlighted.</p>
- .highlight applies a yellow background.
- .bold-text applies bold text.
6. Selecting Classes with JavaScript
JavaScript can modify elements by selecting their class names.
Example: Changing Text Color with JavaScript
<p class="text">Click the button to change my color.</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.querySelector('.text').style.color = "red";
}
</script>
- document.querySelector(‘.text’) selects the first element with class text.
- .style.color = “red”; changes the text color.
Example: Selecting Multiple Elements with getElementsByClassName
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>
<button onclick="changeAll()">Change All Text</button>
<script>
function changeAll() {
let elements = document.getElementsByClassName("text");
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = "blue";
}
}
</script>
- getElementsByClassName(“text”) selects all elements with class text.
- The for loop applies a blue color to every selected element.
7. Best Practices for Using Classes
Use Descriptive Class Names
Instead of:
<p class="abc">Hello</p>
Use:
<p class="welcome-message">Hello</p>
- Makes code easier to understand.
Avoid Using IDs for Styling
Instead of:
<p id="title">Page Title</p>
Use:
<p class="page-title">Page Title</p>
- IDs should be used for unique elements, not styling.
Use Classes for Reusability
Instead of:
<h1 style="color: blue;">Title</h1> <p style="color: blue;">Text</p>
Use:
<style>
.blue-text { color: blue; }
</style>
<h1 class="blue-text">Title</h1>
<p class="blue-text">Text</p>
- Makes styling consistent and reusable.
