CSS ID Selector

« Prev Next »

The CSS ID Selector allows you to select and style a single unique HTML element using its id attribute.

  • The id of an element is unique in the page so that no two elements have the same id.
  • This is used to style a unique element.

Syntax

#idname {
  property: value;
}
  • # is the symbol for an ID selector.
  • idname is the value of the id attribute for the element.

css-id-selector

Example

<!DOCTYPE html>
<html>
<head>
  <style>
   #main-heading {
     color: darkblue;
     text-align: center;
     font-size: 36px;
   }
  </style>
</head>
<body>

<h1 id="main-heading">CSS ID Selector Example</h1>
<p>This paragraph is styled using the element selector.</p>
<p>All paragraphs share the same style.</p>

</body>
</html>
Run ›

Advantages

  • Targets a specific, unique element.
  • Offers higher specificity compared to class and element selectors.
  • Useful for unique sections like headers, footers, buttons, or containers.

Disadvantages

  • Not reusable — applies to only one element.
  • Overusing ID selectors can make CSS harder to maintain in large projects.

ID Selector vs Class Selector

Feature ID Selector (#) Class Selector (.)
Symbol #idname .classname
Uniqueness Unique per page Can be used multiple times
Specificity Higher Lower
Reusability Not reusable Reusable
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.