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>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).