How to style with classes and IDs

Style a reusable class

A class begins with a dot in CSS and may appear on many elements.

.notice {
  padding: 1rem;
  border-left: 4px solid royalblue;
}

Combine classes

An element can have several classes, letting each class represent one responsibility.

<p class="notice notice--warning">Check your details.</p>

.notice--warning { border-color: darkorange; }

Use IDs carefully

An ID must be unique in a document and begins with # in CSS. IDs are valuable for labels and fragment links, but their high specificity makes reusable styling harder.

<section id="pricing">...</section>
<a href="#pricing">See pricing</a>

Name by purpose

• Use names such as card or error-message
• Avoid names tied only to color or position
• Use lowercase words separated consistently
• Add classes instead of making selectors increasingly complex