HTML Classes
Learn how to use classes to style and organize your HTML elements
🎨 What are HTML Classes?
The class attribute allows you to apply the same styling to multiple HTML elements. Classes are reusable and help organize your code.
<p class="highlight">This text is highlighted</p>
<p class="highlight">This text is also highlighted</p>Output:
This text is highlighted
This text is also highlighted
Key Class Concepts
Single Class
Apply one class to an element
<div class="container">Content</div>Multiple Classes
Apply multiple classes separated by spaces
<p class="text bold red">Text</p>Reusable
Use the same class on multiple elements
<h1 class="title">Heading</h1>
<h2 class="title">Subheading</h2>CSS Styling
Style classes with CSS
.highlight {
background: yellow;
}🔹 Basic Class Usage
Here's how to use classes in HTML:
<!-- Single class -->
<h1 class="main-title">Welcome</h1>
<!-- Multiple classes -->
<p class="text large blue">Important text</p>
<!-- Same class on different elements -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>Output:
Welcome
Important text
🔹 Class Naming Best Practices
Use descriptive and meaningful class names:
<!-- Good class names -->
<div class="header">Header content</div>
<p class="warning-message">Warning!</p>
<button class="primary-button">Click me</button>
<!-- Avoid generic names -->
<div class="red">Content</div>
<p class="big">Text</p>Output:
Warning!