CSS ID Selector

The ID Selector in CSS is like a spotlight—it allows you to target a single, unique element on your webpage. When you want to style an element that is one-of-a-kind, this is the tool to use!

1. How to Use an ID Selector

To use an ID selector, start with a hash symbol (#) followed by the unique ID name. Then, define your styles inside curly braces.

/* Style for an element with the ID 'header' */
#header {
  background-color: blue;
  color: white;
}

In HTML, you assign the ID to an element using theid attribute:

<h1 id="header">Welcome to My Website</h1>

2. Uniqueness of IDs

Each ID should be unique within a page. Think of an ID as the fingerprint of an element—no two elements should share the same ID.

/* HTML example with unique IDs */
<div id="main-content">Content goes here.</div>
<footer id="footer">Footer content here.</footer>

3. Why Use an ID Selector?

ID selectors are the most specific way to style an element, making them perfect for cases where you want absolute control over an element's appearance.