Tutorial Article

CSS ID Selector

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 (#) […]

Mar 31, 2026CSSCSS SelectorsTutorials

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.

ID Selector Syntax

#idname {
    property: value;
}

ID Selector Example

#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

CSS ID Selector Complete 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.