0
0
CSSmarkup~5 mins

ID selectors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

ID selectors let you style one specific element on a webpage. This helps you change the look of that element without affecting others.

You want to style a unique header or title on your page.
You need to change the color of a specific button.
You want to add special spacing or font size to one paragraph.
You want to highlight a single section differently from the rest.
You want to target one element for JavaScript or CSS effects.
Syntax
CSS
#idName { property: value; }
The # symbol is used before the ID name to select it.
ID names must be unique on the page; only one element should have that ID.
Examples
This changes the text color of the element with ID 'header' to blue.
CSS
#header { color: blue; }
This sets the background color of the element with ID 'submitButton' to green.
CSS
#submitButton { background-color: green; }
This makes the element with ID 'mainTitle' bigger and bold.
CSS
#mainTitle { font-size: 2rem; font-weight: bold; }
Sample Program

The paragraph with id="specialText" is styled to be red, bigger, and bold. The other paragraphs stay normal.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ID Selector Example</title>
  <style>
    #specialText {
      color: red;
      font-size: 1.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p id="specialText">This paragraph is styled using an ID selector.</p>
  <p>This is another normal paragraph.</p>
</body>
</html>
OutputSuccess
Important Notes

Remember, IDs should be unique on the page. Using the same ID on multiple elements can cause unexpected results.

ID selectors have higher priority than class selectors, so they override class styles if both apply.

Summary

ID selectors target one unique element using the # symbol.

Use IDs to style or control a single element on your page.

Make sure each ID is unique to avoid confusion.