Learning how to create CSS ID selectors is an essential skill in any CSS tutorial — CSS ID selectors allow you to apply unique styles to a single, specific HTML element on the page. Unlike CSS classes (which can be reused on many elements), CSS ID selectors are designed for one-of-a-kind items — things that appear only once per page, such as a site header, main navigation bar, footer, hero section, unique logo, or form submit button. In this guide, you’ll learn the syntax, how to apply IDs, when to use them vs classes, and real-world best practices using your css-practice project.

This CSS tutorial for beginners builds directly on your existing setup — you’ll edit styles.css and index.html to see unique styling in action.

Prerequisites

  • Your css-practice project folder from previous lessons:
    • index.html (linked to css/styles.css)
    • css/styles.css
    • images/ folder (optional for now)
  • Visual Studio Code (or any editor) with Live Server recommended
  • Browser for preview

1. How CSS ID Selectors Work – The Core Concept

CSS ID selectors are defined with a hash # followed by your ID name:

				
					/* This creates a CSS ID selector called "main-title" */
#main-title {
  color: #0066cc;
  font-size: 60px;
  text-align: center;
  margin: 40px 0;
}

To use the ID in HTML:

				
					<h2 id="main-title">Welcome to Progressive Robot</h2>

Important rules for CSS ID selectors:

  • An ID must be unique on the page — only one element can have id=”main-title”.
  • IDs are more specific than classes — they override class styles if both apply.
  • Use IDs sparingly — modern CSS favours classes for most styling.

2. Create Your First CSS ID Selector – Hands-On

Open css/styles.css and add this rule:

				
					#unique-paragraph {
  color: purple;
  font-size: 22px;
  background-color: #f8f0ff;
  padding: 20px;
  border-left: 6px solid purple;
  border-radius: 6px;
  max-width: 800px;
  margin: 30px auto;
}

Save the file.

Now open index.html and add a paragraph with the ID:

				
					<h2>A Sample Title</h2>

<p id="unique-paragraph">This is a special paragraph styled with a CSS ID selector – it appears only once on the page.</p>

<p>This normal paragraph stays unstyled by the ID.</p>

Save and refresh — the special paragraph should now have:

  • purple text & border
  • light purple background
  • padding, rounded corners, centered block

This is how to create CSS ID selectors and apply unique styling.

3. When to Use CSS ID Selectors vs Classes

 
 
FeatureCSS ID Selectors (#id)CSS Classes (.class)
ReusabilityUnique – only one per pageReusable – many elements can use it
SpecificityVery high – overrides classesMedium – can be overridden by IDs
Best forOne-time elements (header, footer, hero)Repeated elements (buttons, cards, text)
JavaScript targetingdocument.getElementById()document.querySelectorAll(‘.class’)
Modern recommendationUse sparingly (mostly for JS anchors)Preferred for styling
 

Best practice in 2025–2026:

  • Use CSS classes for 90% of styling
  • Use CSS ID selectors only for:
    • Unique page sections (e.g., #hero, #footer)
    • JavaScript targets (e.g., scroll-to anchors)
    • One-time landmarks

4. Real-World Example: Styling a Unique Hero Section with CSS ID Selectors

Add this to styles.css:

				
					#hero-section {
  background-color: #0066cc;
  color: white;
  padding: 80px 20px;
  text-align: center;
  border-radius: 12px;
  margin: 40px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#hero-section h1 {
  font-size: 4rem;
  margin-bottom: 20px;
}

#hero-section p {
  font-size: 1.4rem;
  max-width: 800px;
  margin: 0 auto 30px;
}

Update index.html:

				
					<section id="hero-section">
  <h2>Welcome to Progressive Robot</h2>
  <p>We build modern, beautiful websites with clean HTML & CSS.</p>
</section>

<p>Normal content below the hero section.</p>

Refresh — you now have a unique, standout hero section using CSS ID selectors.

5. Best Practices & Modern Tips (2025–2026)

  • Keep ID names descriptive: #main-nav, #contact-form, #page-footer
  • Avoid styling too much with IDs — use classes inside them instead
  • Use IDs for anchor links: <a href=”#contact”>Go to Contact</a>
  • Never duplicate IDs — browsers will ignore or behave unpredictably
  • Prefer classes for reusable styles; IDs for unique landmarks
  • Add comments:
				
					/* Unique hero section – appears only once per page */
#hero-section { ... }

How to Create CSS ID Selectors – FAQ (2025–2026)

  1. How do I create CSS ID selectors?
    #id-name { property: value; } — basic syntax to create CSS ID selectors.
  2. How do I apply CSS ID selectors to HTML elements?
    id=”id-name” — only one element per page can use the same ID.
  3. Can I use multiple IDs on one element?
    No — only one ID per element. Use multiple classes instead.
  4. When should I use CSS ID selectors instead of classes?
    For unique, one-time elements (header, footer, hero) or JavaScript targets.
  5. What happens if I duplicate an ID?
    Invalid HTML — styling/JS may break or apply unpredictably.

Summary

You now know exactly how to create CSS ID selectors: syntax (#id-name), applying to unique elements, when to use IDs vs classes, real-world examples (hero sections, anchors), and Progressive Robot best practices.

Mastering CSS ID selectors gives you tools for unique page landmarks while keeping most styling with reusable classes.

Keep your css-practice folder open — in the next lessons you’ll explore pseudo-classes, the box model, Flexbox/Grid layouts, and responsive design.

Contact Us