The CSS ID Selector is used to style a specific HTML element with a unique ID.
Unlike class selectors, an ID is meant to be used only once per page, making it ideal for targeting a single, unique element.
Each ID must be unique within an HTML document.
ID selectors are defined using a hash (#) followed by the ID name.
#idname {
property: value;
}#header {
color: blue;
text-align: center;
}👉 This will apply styles to the element with id="header".
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: red; |
| background | Sets background color | background: yellow; |
| text-align | Aligns text | text-align: center; |
| padding | Adds inner spacing | padding: 15px; |
| border | Adds border | border: 2px solid black/ |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS ID Selector</title>
<style>
#header {
color: blue;
text-align: center;
}
#box {
background: lightgray;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="header">ID Selector Example</h1>
<p>This is a normal paragraph.</p>
<div id="box">This is a styled box using ID.</div>
</body>
</html>Output
Browser Output
The heading will appear in blue color and centered
The <div> will have a light gray background with padding and border
Other elements will remain unchanged
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- ID selector starts with a hash (
#) - Each ID should be unique in a page
- An element can have only one ID
- IDs have higher priority than classes in CSS
- Avoid overusing IDs for styling; prefer classes for reusability
Conclusion
The CSS ID Selector is useful for targeting and styling a single unique element on a webpage. While powerful due to its high specificity, it should be used carefully to maintain clean and reusable code.
