HTML Classes & IDs

Intermediate ~10 min read

Why Use Classes & IDs?

Classes and IDs allow you to:

Target specific elements with CSS styles
Select elements with JavaScript
Create reusable style patterns
Link to specific page sections

The Class Attribute

Classes can be used on multiple elements. They're perfect for reusable styles.

HTML

CSS

<style>\n  .highlight { background: yellow; padding: 2px 5px; }\n  .error { color: red; font-weight: bold; }\n  .success { color: green; }\n</style>\n\n<p class="highlight">This paragraph is highlighted.</p>\n<p class="error">Error: Something went wrong!</p>\n<p class="success">Success: Operation completed.</p>\n<p class="highlight">Another highlighted paragraph.</p>

The ID Attribute

IDs must be unique - only one element per page can have a specific ID.

HTML

CSS

<style>\n  #main-title { color: #1976d2; border-bottom: 2px solid #1976d2; }\n  #sidebar { background: #f5f5f5; padding: 15px; }\n</style>\n\n<h1 id="main-title">Welcome to My Site</h1>\n<div id="sidebar">\n  <p>This is the sidebar content.</p>\n</div>

Multiple Classes

An element can have multiple classes, separated by spaces:

HTML

CSS

<style>\n  .btn { padding: 10px 20px; border: none; cursor: pointer; }\n  .btn-primary { background: #1976d2; color: white; }\n  .btn-danger { background: #d32f2f; color: white; }\n  .btn-large { font-size: 18px; padding: 15px 30px; }\n</style>\n\n<button class="btn btn-primary">Primary</button>\n<button class="btn btn-danger">Danger</button>\n<button class="btn btn-primary btn-large">Large Primary</button>

Class vs ID: When to Use

Class	ID
Reusable on many elements	Unique, one per page
CSS: `.classname`	CSS: `#idname`
For styling patterns	For unique elements, anchors

Naming Convention: Use lowercase with hyphens: main-content, nav-link, btn-primary

Quick Quiz

How many elements can share the same ID on a page?

Unlimited

One

Two

Ten

Previous Div & Span

Next Page Layout

Why Use Classes & IDs?

The Class Attribute

The ID Attribute

Multiple Classes

Class vs ID: When to Use

Quick Quiz

Enjoying these tutorials?