CSS ID Selector Explained with Syntax and Example

ID Selector

In CSS, the ID selector is used to apply styles to a specific HTML element with a unique id attribute. It is denoted by a hash symbol (#), followed by the ID name.

Key Point

The id attribute must be unique within an HTML document.

Use the # symbol in CSS to select the element by its id.

Styles defined using ID selectors are very specific use them only when necessary.

Prefer using class selectors for elements that are reused.

Syntax:

#elementID {
   /* CSS properties and values */
}

# is used to denote the ID selector.

elementID is the value of the id attribute in your HTML element.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    #para1 {
      text-align: center;
      color: red;
    }
  </style>
</head>

<body>
  <p id="para1">Quipoin.com</p>
</body>

</html>

Output:

Tips

Use ID selectors only when the element is unique (like #header, #footer, #main-title).
Avoid using IDs for multiple elements use .class instead for reusable styles.