CSS IDs in HTML

CSS IDs allow you to style a specific HTML element using a unique identifier. They are useful when you want to apply special formatting to a particular heading, section, button, or other element on a webpage.

In CSS, an ID selector uses a hash symbol (#) followed by the ID name. You assign the identifier to an HTML element using the id attribute.

What Is a CSS ID?

A CSS ID is a selector that targets an HTML element with a matching id attribute. An ID should be unique within an HTML document, meaning it should not be assigned to multiple elements on the same page.

For example:

<h1 id="main-heading">Welcome to Web4Learners</h1>

You can style this heading using the following CSS:

#main-heading {
  color: blue;
  text-align: center;
}

The #main-heading selector applies the specified styles to the element whose ID is main-heading.

To understand how identifiers work in HTML, read our guide to the HTML ID attribute.

CSS ID Syntax

The basic syntax of a CSS ID selector is:

#idname {
  property: value;
}

The hash symbol identifies the selector as an ID selector. The name after the hash must match the element’s id attribute.

For example:

<style>
  #welcome {
    color: green;
    font-size: 28px;
  }
</style>

<h2 id="welcome">Learn HTML and CSS</h2>

In this example, the heading becomes green and uses a font size of 28 pixels.

How to Use CSS IDs in HTML

Follow these steps to style an HTML element using an ID:

• Add an id attribute to the HTML element.
• Give the element a descriptive ID name.
• Create a CSS rule using # followed by the same name.
• Add the CSS properties you want to apply.

Here is another example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS ID Example</title>

  <style>
    #notice {
      background-color: #eaf2ff;
      color: #1769aa;
      padding: 15px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p id="notice">Your registration was successful.</p>
</body>
</html>

Save this code as index.html and open it in a browser. The paragraph will display with a light blue background, blue text, and additional spacing.

Styling Different Elements with IDs

You can use an ID to apply specific styles to a heading, paragraph, section, or button.

<style>
  #page-title {
    color: navy;
  }

  #description {
    font-size: 18px;
    line-height: 1.6;
  }

  #submit-button {
    background-color: #1769aa;
    color: white;
    padding: 10px 18px;
    border: none;
  }
</style>

<h1 id="page-title">Contact Us</h1>
<p id="description">Send us your questions or feedback.</p>
<button id="submit-button">Submit</button>

Each ID targets its corresponding element, allowing you to customize individual parts of the webpage.

For styles that need to be reused across multiple elements, consider using CSS classes instead.

CSS IDs vs. CSS Classes

CSS IDs and classes both help you select HTML elements, but they are used differently.

Feature	CSS ID	CSS Class
CSS selector	#example	.example
HTML attribute	id="example"	class="example"
Intended use	One unique element per document	Multiple elements
Reusability	Should be unique per page	Can be reused
CSS specificity	Higher	Lower

For example, use an ID for a unique main heading and a class for several cards that share the same design.

Learn more about HTML classes to understand how the class attribute differs from id.

Using IDs with JavaScript

IDs are also useful for finding specific HTML elements with JavaScript. The getElementById() method returns the element with the specified ID.

<p id="message">Welcome to our website!</p>

<script>
  const element = document.getElementById("message");
  element.textContent = "Thanks for visiting Web4Learners!";
</script>

The JavaScript code finds the paragraph and changes its text. Make sure the element exists before trying to access or update it.

Common Mistakes When Using CSS IDs

Beginners often forget the hash symbol when writing an ID selector. For example, #header selects an element with id="header", while .header selects elements with class="header".

Another mistake is assigning the same ID to multiple elements. Use a unique ID for each element within the document and choose descriptive names that are easy to understand.

Avoid using an ID when you need to apply the same styles repeatedly. A class is usually a better option for reusable designs.

Frequently Asked Questions

Can multiple elements have the same ID?

An ID should be unique within an HTML document. Use a class when multiple elements need the same styling.

Can an HTML element have both an ID and a class?

Yes. For example, <div id="main-content" class="container"> uses both an ID and a class.

Which has higher CSS specificity, an ID or a class?

An ID selector has higher specificity than a class selector. However, the final applied style also depends on the CSS cascade, including importance, layers, and source order.

Can CSS IDs be used for page navigation?

Yes. An ID can identify a section that a link jumps to, such as <a href="#contact">Contact</a> linking to an element with id="contact".

Final Thoughts

CSS IDs are useful for styling unique HTML elements and identifying elements for JavaScript or page navigation. Use descriptive, unique IDs when you need to target a specific element, and choose CSS classes when you want reusable styles across multiple elements.