HTML & CSS reference

.class

Selects elements that have the given class in the `class` attribute.

Syntax

.name { … }

Parameters

Parameter	Type	Description
.name	class	Elements with the class `name`.
.a.b	classes	Elements that have both classes at once (no space between them).

Examples

One element can carry several classes, and each adds its own styles:

<style>
  .note { padding: 8px; background: lightyellow; }
  .warning { background: mistyrose; }
</style>
 
<p class="note">A note.</p>
<p class="note warning">A note that is also a warning.</p>

Two classes written together match only elements that have both:

<style>
  .btn { padding: 6px 12px; border: 1px solid gray; }
  .btn.primary { background: royalblue; color: white; }
</style>
 
<button class="btn">Cancel</button>
<button class="btn primary">Save</button>

Notes

Classes are the main tool for styling: they can be reused on any element and have moderate specificity. Name a class by what the element is (card, price), not by how it looks (red-text).

In the tutorial

Selectors — How to pick elements for styling — by tag, class, id, nesting and attribute.

Thanks for reading!