The class attribute in HTML is utilized to designate one or more class names to an HTML element. These class names can be employed by CSS and JavaScript to perform various functions on HTML elements. To utilize this class in CSS with a particular class, you can denote it by appending a period (.) followed by the class name to select elements.
A class attribute can be declared within the <class> tag or in a separate file by using the (.) notation.
Within an HTML file, it is possible to apply the identical class attribute name to various elements.
Defining an HTML class
To declare a CSS class, you may use the <style> tag in the <head> of your HTML document or inline in the <body> to demonstrate. Use external CSS files in production.
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
A specific style has been established for a class named "headings", which can be applied to various HTML elements requiring that particular style. To implement this, simply adhere to the syntax provided below.
To apply a particular class to your HTML, include the class attribute in the desired element.
<tag class="headings"> content </tag>
Example 1
<!DOCTYPE html>
<html>
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
<body>
<h1 class="headings">This is first heading</h1>
<h2 class="headings">This is Second heading</h2>
<h3 class="headings">This is third heading</h3>
<h4 class="headings">This is fourth heading</h4>
</body>
</html>
Output:
Another Example with different class name
Consider another instance where a CSS class named "fruit" is utilized to apply styling to all elements.
Example
We will utilize a CSS class named "Fruit" to apply styling to various elements on a webpage.
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
Output:
In this example, the "fruit" class name is utilized with the dot (.) notation to access all of its elements.
Note: You can use class attribute on any HTML element. The class name is case-sensitive.
Class Attribute in JavaScript
To target elements with a specific class name in JavaScript, you can utilize the getElementsByClassName method.
When the button is clicked by the user, the objective is to conceal all the elements identified with the class name "fruit".
Example
<!DOCTYPE html>
<html>
<body>
<h2>Class Attribute with JavaScript</h2>
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="fruit">Mango</h2>
<p>Mango is king of all fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Oranges are full of Vitamin C.</p>
<h2 class="fruit">Apple</h2>
<p>An apple a day, keeps the Doctor away.</p>
<script>
function myFunction() {
const elements = document.getElementsByClassName("fruit");
for (let el of elements) {
el.style.display = "none"; // or use el.classList.add("hidden") with a .hidden { display: none; } style
}
}
</script>
</body>
</html>
Output:
Once the Hide elements button is clicked, the result will display:
Multiple Classes
It is possible to assign multiple class names to HTML elements by separating them with spaces.
Apply styling to elements that have the class name "fruit" and the class name "center".
Example
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
.center {
text-align: center;
}
</style>
<body>
<h2>Multiple Classes</h2>
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>
<h2 class="fruit center">Mango</h2>
<h2 class="fruit">Orange</h2>
<h2 class="fruit">Apple</h2>
</body>
</html>
Output:
You can see that the first element
belongs to both the "fruit" class and the "center" class.
Same class with Different Tag
Utilize identical class names across various tags such as <h2> and <p> to apply consistent styling.
Example
<!DOCTYPE html>
<html>
<style>
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class with Different Tag</h2>
<h2 class="fruit">Mango</h2>
<p class="fruit">Mango is the king of all fruits.</p>
</body>
</html>
Output:
Please remember that the class attribute is primarily utilized for styling and scripting purposes. Its influence on accessibility is minimal unless it is paired with semantic elements or ARIA attributes.
Using External CSS with Class Attributes
Instead of defining styles directly within a <style> tag, you have the option to define your styles using classes in an external CSS file. You can then link this CSS file to your HTML document using the <link> tag.
Example
styles.css
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="fruit"> Mango </h2>
<p class="fruit"> Mango is the king of fruits. </p>
</body>
</html>
Output:
Note: External CSS helps you to maintain a clean, reusable and maintainable code, particularly on larger websites.
Using Element Selectors with Classes
Utilizing a combined selector in CSS enables the specific targeting of elements with a certain class for styling purposes. For instance, you can style only the <p> tags belonging to a particular class:
p.fruit {
font-style: italic;
font-size: 18px;
}
Output:
Only elements with the class "fruit" that are marked with <p> tags will be impacted, excluding headings and divs.
JavaScript: Modern Selector Alternative
To select elements in the DOM, you have the option to utilize document.querySelectorAll. This method provides a static NodeList and allows for the utilization of more versatile selectors as opposed to employing getElementsByClassName, which yields a live HTMLCollection.
Example
document.querySelectorAll(".fruit").forEach(el => {
el.style.display = "none";
});
Output:
Mango is the king of fruits.
It provides a more concise alternative and complements modern JavaScript techniques like forEach.
class vs id
- Use a class when several elements need the same style or behaviour.
- Use id for a single and unique element on the page.
| Attribute | Unique? | Used by | Syntax |
|---|---|---|---|
| class | No | CSS & JS | .classname |
id |
Yes | CSS & JS | #idname |
Example
<h2 class="fruit"> Apple </h2>
<p id="description"> Apples are nutritious. </p>
Conclusion
The class attribute in HTML is a versatile and beneficial feature that enables developers to apply consistent styling and functionality to different elements using CSS and JavaScript. Whether styles are defined inline, externally, or through a mix of classes, mastering the organization and utilization of class names is essential for creating clean, sustainable, and expandable web projects.
By mastering the application of class selectors and understanding their integration with scripting and styling, you gain enhanced authority over the layout and functionality of your web pages.