The class attribute frequently references a class name in a style sheet. Additionally, it can be utilized by JavaScript to access and modify elements with the designated class name.
In the provided example, three <div> elements feature a class attribute set to “city”. Consequently, all three <div> elements will be uniformly styled based on the .city style definition within the head section.
Example
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class=”city”> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class=”city”> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class=”city”> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> |
In this example, two <span> elements each possess a class attribute set to “note”. As a result, both <span> elements will be uniformly styled based on the .note style definition found in the head section.
Example
| <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class=”note”>Important</span> Heading</h1> <p>This is some <span class=”note”>important</span> text.</p> </body> </html> |
|
Tip: You can apply the class attribute to any HTML element. Note: The class name is case-sensitive! |
To define a class, begin with a period (.) followed by the class name. Then, enclose the CSS properties within curly braces ({}).
Example
Create a class named “city”.
| <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class=”city”>London</h2> <p>London is the capital of England.</p> <h2 class=”city”>Paris</h2> <p>Paris is the capital of France.</p> <h2 class=”city”>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html> |
HTML elements have the ability to be associated with multiple classes.
To designate multiple classes, delineate the class names with spaces, for instance, <div class=”city main”>. Consequently, the element will be styled according to the rules defined in all specified classes.
In the given example, the initial <h2> element is assigned both the city and main classes, thus inheriting CSS styles from both classes.
Example
| <h2 class=”city main”>London</h2> <h2 class=”city”>Paris</h2> <h2 class=”city”>Tokyo</h2> |
Various HTML elements can reference the same class name.
In the provided example, both <h2> and <p> elements are associated with the “city” class, thus inheriting the same style.
Example
| <h2 class=”city”>Paris</h2> <p class=”city”>Paris is the capital of France</p> |
JavaScript can utilize the class name to execute specific tasks on particular elements.
Elements with a specific class name can be accessed by JavaScript using the getElementsByClassName() method.
Example
Click a button to conceal all elements having the class name “city”.
| <script> function myFunction() { var x = document.getElementsByClassName(“city”); for (var i = 0; i < x.length; i++) { x[i].style.display = “none”; } } </script> |
