HTML Tutorial: HTML Classes
Learn how to use HTML classes to style multiple elements consistently with colorful examples
HTML classes allow you to apply styles to multiple elements efficiently.
Use the class attribute and CSS.
1️⃣ Basic Class Example
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { color: blue; font-weight: bold; }
</style>
</head>
<body>
highlight
highlight
">Heading with same class </body> </html>OUTPUT:
This text is styled with a class.
Heading with same class
✔️ Apply the highlight class to multiple elements
✔️ All elements with this class inherit the same styles
2️⃣ Multiple Classes on One Element
INPUT:
<style>
.blue { color: blue; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
</style>
<p class="blue bold italic">
Text with multiple classes applied
</p>
OUTPUT:
Text with multiple classes applied
✔️ Multiple classes are separated by spaces ✔️ Each class adds its own styling rules
3️⃣ Classes for Layout Divs
INPUT:
<style>
.header { background-color: #0077cc; color: white; padding: 10px; }
.content { background-color: #f0f7ff; padding: 10px; }
.footer { background-color: #0077cc; color: white; padding: 10px; }
</style>
<div class="header">Header</div>
<div class="content">Main Content</div>
<div class="footer">Footer</div>
OUTPUT:
HeaderMain Content
✔️ Classes make styling multiple sections consistent ✔️ Easy to maintain and update design
4️⃣ Best Practices for Classes
- Use meaningful class names (
header, content, footer) - Combine classes for reusable styling (
blue bold) - Use CSS instead of inline styles for cleaner code
- Keep indentation consistent for readability
- Classes allow flexible and scalable webpage design
🚀 What’s Next?
👉 HTML Id
Next lesson will cover:
- Using the
idattribute for unique elements - Difference between classes and ids
- Styling elements with id selectors
HTML classes are essential for styling multiple elements consistently and organizing your webpage efficiently.