For example, if you want to make broad changes on your site, then you can use a type selector. Say you’d like to style every span element on your site. Then you’d use the type selector span { style properties }.

To make more detailed changes, you need a more specific selector. The most specific is an ID selector. Let’s take a closer look at this selector type below.

Here’s a look at the syntax of an ID selector in CSS:

There are a few rules you must follow to use the CSS ID selector correctly. Before we take a look at those rules below, let me make an important note about the examples below.

I’ll also be using BootstrapCDN to load Bootstrap's default stylesheet so the examples will be styled accordingly. However, the HTML and CSS of the examples will work on HTML5 sites as well. So if you’re building your site from scratch instead of using the Bootstrap CSS framework, you can still use the HTML and CSS as templates.

The first rule to keep in mind when using the ID attribute is that it must contain at least one character and cannot begin with a number.

Let’s say I have multiple h2s on my site and each marks the start of a new chapter. Then I might give each h2 an ID name.

The following HTML is correct:

This is incorrect:

The second rule to keep in mind is that if an element is given an ID name, it must be unique within a page. That way, an ID selector selects only one unique element.

Returning to the example of multiple h2s, let’s say I want each of these h2s to have a different style to visually cue the reader when a new chapter begins. In that case, I’d give each h2 a unique ID name so that I could use ID selectors to apply a unique set of property values to each.

The following HTML is correct:

This is incorrect:

The following CSS would change the font size of each h2:

Here’s the result:

See the Pen mdWVXKM by Christina Perricone (@hubspot) on CodePen.

The last rule to keep in mind when using ID selectors is that the property value of the ID selector must match the ID name exactly.

Using the HTML from the example above, the following CSS would be correct.

This would be incorrect:

If I were to use this CSS with the lowercase “c,” the CSS ID selectors and their respective CSS rules would not be applied. The default h2 style in Bootstrap would render instead, as shown below.

See the Pen How NOT to use CSS ID by Christina Perricone (@hubspot) on CodePen.

We've covered the rules of using the ID selector in CSS. Now let's apply them by using an ID selector to style images.

You can use the ID selector on headings or images, buttons, and other HTML elements.

Let's say you want to style a specific image on your page. Maybe you want it to have a different shape and level of opacity than the other images on that page. In that case, you could use an ID selector.

To start, you'd add an ID attribute to the image. This ID attribute can appear anywhere inside the image element: before the img src attribute, after the src attribute but before the alt attribute, after both the img src and alt attributes.

In the example below, I'll place the ID attribute "round" before the src and alt attributes in the second image element. Then, I'll use an ID selector to style this image to be round and 70% opaque.

Here's the HTML:

Here's the CSS:

Here's the result:

See the Pen CSS Image ID by Christina Perricone (@hubspot) on CodePen.

Now that we understand what an ID selector is and how to use one in CSS, let’s make sure we understand the distinction between class and ID in CSS.

Another key difference between a class selector and an ID selector is specificity. CSS selectors have different levels of specificity so that if an HTML element is targeted by multiple selectors, the browser will apply the CSS rule of the selector with the higher specificity.

When comparing class selectors vs. ID selectors, ID selectors have the higher specificity and are therefore more powerful. (In fact, ID selectors are so powerful that only the !important property can override them in CSS.) That means if an element is targeted by an ID selector and a class selector, the CSS style of the ID selector will be applied to the element over the style of the class selector.

Let’s take a look at an example demonstrating this rule below.

Say I’m creating buttons for my Bootstrap site. While Bootstrap CSS offers predefined styles for buttons, I’m going to create custom ones so I just start with the most basic template, shown below.

Across my site, I want my button elements to be Calypso blue. In that case, I’d use a class selector to define all elements under the button class to have a blue background color (the hex color code #00A4BD) and a white font color (#FFFFFF).

Here’s the HTML:

Here’s the CSS:

Here’s the result:

See the Pen qBrbxwa by Christina Perricone (@hubspot) on CodePen.

But let’s say I want the subscribe button on my homepage to be even more eye-catching. Then I could use an ID selector to define the one button with the ID “homepage” and style it to have a fuschia background color and a black font color (#000000). All buttons without the ID “homepage” will still follow the CSS rule of the class selector (blue background color and white font color).

Here’s the HTML:

Here’s the CSS:

Here’s the result:

See the Pen CSS Class vs ID by Christina Perricone (@hubspot) on CodePen.

CSS selectors enable you to control the appearance of HTML elements on your site. With the ID selector, you can maintain granular control over your customization process and code by targeting a single element on the page. To use this selector, you only need basic knowledge of HTML and CSS.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an

element that points to the id name "myHeader". This

element will be styled according to the #myHeader style definition in the head section:

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

First, create a bookmark with the id attribute:

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

The id attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is used using the # symbol followed by id. quotes are not mandatory in tag=” ” in all cases. But writing with quotes is a good practice.

Syntax:

Note: This is a global attribute, it can be used in all the tags.

Example 1: In this example, we simply style the element with id “geeks”.

Output:

Example 2: In this example, we are adding the styling properties to the specific id attribute value by fetching its id value.

Output:

Note: In HTML5, id attributes can be used by any HTML tag but in HTML 4.01 there are some restriction to use id attributes. It can not be used by , , , , ,