Master CSS From Scratch

Clear, interactive, and structured CSS lessons designed for beginners.

ID Selector

An ID selector is used to apply CSS styles to a specific HTML element that has a unique ID.

What is an ID Selector?

An ID selector targets an HTML element using its id attribute.

In CSS, an ID selector starts with a hash symbol (#) followed by the ID name.

ID Selector Flow

HTML Element
id="heading"
↓
CSS ID Selector
#heading
↓
Applied CSS Style

Basic Syntax

#id-name {
    property: value;
}

The # symbol identifies the selector as an ID selector.

Example 1: Styling an ID

The following CSS changes the color of an element having the ID heading.

#heading {
    color: blue;
}

Output

Welcome to CSS

Example 2: Multiple CSS Properties

#main-title {
    color: red;
    font-size: 28px;
}

Output

CSS Tutorial

Example 3: Styling a Specific Element

#box {
    background-color: lightblue;
    padding: 15px;
    border: 1px solid blue;
}

Output

This is a specific element.

Important Points

  • An ID selector starts with the # symbol.
  • The ID name must match the HTML id attribute.
  • An ID is normally used for a specific element.
  • ID names should be unique within a page.
  • ID selectors are useful when a specific element needs individual styling.

Summary

An ID selector targets a specific HTML element using its unique ID. It starts with the # symbol followed by the ID name.