Classes and IDs

What Is It?

A class gives several elements the same name for styling. An ID gives one element a unique name.

What the Tags Mean

• class: a reusable name.
• id: a unique name.
• .name: a CSS class selector.
• #name: a CSS ID selector.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Classes and IDs</title>
<style>
  .note { color: blue; }
</style>
</head>
<body>
<p class="note">First note</p>
<p class="note">Second note</p>
</body>
</html>

What you see: Both paragraphs are blue because they share the note class.

Example 2: Another Use

Use an ID when a link needs one exact destination.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Classes and IDs</title>
 
</head>
<body>
<a href="#contact">Contact</a>
<h2 id="contact">Contact details</h2>
</body>
</html>

Simple Tip

You can reuse a class. Do not reuse an ID on the same page.

Try It Yourself

Add a third paragraph with the note class.