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! |