HTML Β· Chapter 22 of 45
HTML Classes
The class attribute assigns one or more class names to an element, which CSS or JavaScript can target to apply shared styles or behavior across multiple elements.
Unlike id, class values are not unique β many elements can share the same class, and one element can have multiple classes separated by spaces.
Syntax
<tagname class="classname">Using classes in CSS
In CSS, target a class with a dot prefix: .classname { ... }. This applies the style to every element with that class.
Multiple classes
An element can have several classes: class="card featured". This lets you combine reusable style building blocks.
Example 1 (html)
<p class="highlight">Important note</p>
<style>.highlight { background: yellow; }</style>Output
Important note (yellow background)The class links the paragraph to a CSS rule.
Example 2 (html)
<div class="card featured">Special Item</div>Output
Special ItemTwo classes are applied at once, each potentially adding its own styles.
Key points
- class assigns one or more reusable names to an element.
- CSS targets classes with a dot: .classname.
- Multiple elements can share the same class.
- One element can have multiple space-separated classes.
π‘ Note: Classes are the primary hook used by CSS frameworks like Bootstrap and Tailwind.