<htmlstart/>

HTML Classes

The class attribute links HTML elements to CSS styles and JavaScript logic.

The class Attribute

Add a class attribute to any element. Then target it in CSS with a dot . prefix.

<!-- HTML -->
<div class="card">Hello</div>
<p class="warning">Be careful!</p>
/* CSS */
.card {
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.warning {
  color: #D62828;
  font-weight: bold;
}

Multiple Classes

An element can have multiple classes separated by spaces:

<div class="card featured large">...</div>
.card     { padding: 24px; border-radius: 8px; }
.featured { border: 2px solid #D62828; }
.large    { font-size: 18px; }

Same Class on Many Elements

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">About</li>
  <li class="menu-item active">Contact</li>
</ul>
Classes are the main way to apply CSS styles. Use lowercase, hyphenated names: card-title not CardTitle or card_title.