ID Selector

Sometimes you need to target one specific element and nothing else. That is what the ID selector is for.

In CSS, you write a hash # followed by the ID name.

#header {
  background-color: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
}

#main-content {
  max-width: 800px;
  margin: 0 auto;
}

In HTML, you give an element an id attribute.

<div id="header">Welcome</div>
<div id="main-content">Content goes here</div>

Try it Yourself →

ID vs Class — The Golden Rule

Here is the simplest way to remember the difference: IDs are unique, classes are reusable. An ID should only be used once per page. A class can be used as many times as you want.

Think of an ID like a passport number — it belongs to one person. A class is more like a job title — many people can share it.

When to Use IDs

IDs are perfect for page sections that only appear once: a header, a footer, a main navigation, a sidebar. They are also useful for linking — you can link directly to an element by its ID (like page.html#section-2).

🧪 Quick Quiz

How do you select an element by its id?

← Class Selector

Universal Selector →