CSS ID Selector

The CSS ID selector is used to apply styles to a specific HTML element that has a unique id attribute. IDs should be unique within a page, making this selector useful for targeting individual elements.

The syntax for the ID selector is:

</>
Copy
#id {
    property: value;
}

Where:

ParameterDescription
#idThe unique ID of an HTML element, preceded by the # symbol.
propertyA CSS property (e.g., color, margin, etc.).
valueThe value assigned to the CSS property.

Examples

Styling a Specific Element using ID Selector

In the following example, we set the text color of the element with the id="title" to blue.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #title {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="title">Welcome to CSS Tutorial</h1>
</body>
</html>

Applying Styles to a Button using ID Selector

In this example, we set the background color of the button with the id="submit-btn" to green and its text color to white.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #submit-btn {
            background-color: green;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="submit-btn">Submit</button>
</body>
</html>

Styling a Div using ID Selector

In this example, we set a border and padding for the div element with the id="content".

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #content {
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div id="content">This is a content area.</div>
</body>
</html>