HTML Classes
Classes connect elements to shared styling or behaviour. Several elements can share one class, and one element can carry several classes when their responsibilities are distinct.
How it works
- Separate class names with whitespace, not commas. A class token is matched independently of its position in the attribute.
- A CSS class selector starts with a dot, such as .notice. The dot is not written inside the HTML class value.
- Prefer names that describe a useful component or role. A name tied to a temporary colour can become confusing after a redesign.
A practical example
<p class="notice">Booking opens next week.</p>
<p class="notice notice-important">Bring protective gloves.</p>
A .notice rule can style both paragraphs. A .notice-important rule can add the extra distinction only to the second paragraph.