ID Selector
The CSS ID selector is used to style a single, unique element on a webpage. IDs are unique within a page, meaning each element should have only one ID.
Syntax
#idname {
property: value;
}
Example
#header {
background-color: black;
color: white;
padding: 20px;
text-align: center;
}
/* Styling a unique button with the ID "submit-btn" */
#submit-btn {
background-color: green;
color: white;
font-size: 16px;
}
Explanation
- #header applies styles only to the element with ID "header".
- #submit-btn applies styles only to the element with ID "submit-btn".
Example in HTML
<h1 id="header">Welcome to My Website</h1>
<button id="submit-btn">Submit</button>
Differences: ID vs. ClassSelector | Usage | Example |
---|---|---|
#idname | Unique for one element | #header { color: red; } |
.classname | Reusable for multiple elements | .button { color: blue; } |