Multiple Classes
An HTML element can have multiple classes separated by spaces. Each class contributes its own styles, which combine on the element.
This approach is used by utility-first frameworks like Bootstrap and Tailwind CSS.
HTML
Beginner
3 min read
Multiple CSS Classes on One Element
Example
<button class="btn btn-primary btn-large">Submit</button>
<div class="card card-shadow card-rounded">Content</div>
/* Each class adds its own rules */
.btn { padding: 8px 16px; border: none; cursor: pointer; }
.btn-primary { background: #007bff; color: white; }
.btn-large { font-size: 1.2rem; padding: 12px 24px; } Pro Tip
Combining small, focused classes is more flexible than writing large, monolithic selectors.