Styling with CSS Classes

CSS Classes

CSS classes target multiple elements sharing the same name. Add a class with class="name" and select it in CSS with .name.

Classes are the cornerstone of reusable, maintainable CSS.

Example

<!-- HTML -->
<p class="highlight">Important paragraph</p>
<span class="highlight">Also highlighted</span>

/* CSS */
.highlight {
  background: yellow;
  font-weight: bold;
}

HTML

Full Editor

Pro Tip

Name classes by purpose (e.g. .btn-primary) not by appearance (e.g. .blue-button).

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned