Everything You Need to Know about ID in CSS

HTML elements can be defined by type, class, attribute, pseudo-state, or ID name. How you define them will affect how you customize them using CSS selectors.

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download for free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

How to Use ID in CSS

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 [Example] 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.

CSS Image ID

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.

Here's the CSS:

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 [Example] by Christina Perricone (@hubspot) on CodePen.

Make Detailed Changes with the CSS ID Selector

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.