Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

ID selector – CSS

Demo

Summary

HTML code:

<p id="id-name">Paragraph text with id attribute.</p>

CSS code:

#id-name {
  /* Insert code here */
}

Details

The ID selector allows you to apply CSS styles to a single element on an HTML page that has the ID name in its ID attribute.

Notice in the CSS file that the ID name is prefixed with a hash symbol.

In the example below, the CSS styles are only applied to the first paragraph because it’s the only element that contains the ID.

<p id="important-note">First paragraph.</p>
<p>Next paragraph.</p>
<p>Last paragraph.</p>
#important-note {
  color: red;
}

id values must be unique and can only be used on one element at a time. In the example below, the same id value is used on a heading and a paragraph element. This won’t work. Instead, the heading should have one id value and the paragraph should have a different id value.

<!-- This won't work -->
<h1 id="id-name">Heading with an id value.</h1>
<p id="id-name">Paragraph text with the same id value.</p>

Exercises

Recreate the HTML and CSS code from the Demo section in your HTML and CSS files.

References

ID selectors on MDN

Back to: CSS Course > CSS Selectors