Type, Class, and ID Selectors in CSS Tutorial

Introduction

CSS selectors tell the browser which HTML elements to style.

For example:

1p {2  color: blue;3}

This CSS selects all paragraph elements and makes their text blue.

Selectors are one of the most important parts of CSS because they connect your CSS rules to your HTML elements.

Three of the most common selector types are:

1type selectors2class selectors3ID selectors

These let you select elements by:

1tag name2class attribute3ID attribute

For example:

1p {2  color: blue;3}

selects all <p> elements.

1.note {2  color: blue;3}

selects elements with class="note".

1#intro {2  color: blue;3}

selects the element with id="intro".

Understanding these three selectors gives you a strong foundation for styling HTML with CSS.

What Is a CSS Selector?

A CSS selector chooses which HTML elements a CSS rule should affect.

A basic CSS rule looks like this:

1selector {2  property: value;3}

For example:

1h1 {2  color: navy;3}

The selector is:

1h1

The declaration is:

1color: navy;

This tells the browser:

1find all h1 elements2make their text colour navy

Without a selector, the browser would not know which elements to style.

The Three Selector Types in This Article

This article focuses on three common selector types.

A type selector selects HTML elements by tag name:

1p {2  color: #333333;3}

A class selector selects elements by class name:

1.card {2  padding: 24px;3}

An ID selector selects one element by ID:

1#main-content {2  max-width: 1000px;3}

A simple rule is:

1type selector = element name2class selector = reusable group3ID selector = one unique element

What Is a Type Selector?

A type selector selects elements by their HTML tag name.

For example:

1p {2  line-height: 1.6;3}

This selects all <p> elements on the page.

Another example:

1h1 {2  font-size: 2.5rem;3}

This selects all <h1> elements.

Another example:

1button {2  padding: 10px 16px;3}

This selects all <button> elements.

Type selectors are simple and useful when you want to style every element of a certain type.

Type Selector Example

HTML:

1<h1>Welcome</h1>2 3<p>This is the first paragraph.</p>4 5<p>This is the second paragraph.</p>

CSS:

1p {2  color: #333333;3  line-height: 1.6;4}

This CSS applies to both paragraphs.

It does not apply to the <h1>.

The selector p means:

1select every paragraph element

Type selectors are broad because they target every matching tag.

Common Type Selectors

Common type selectors include:

1body

1h1

1h2

1p

1a

1img

1ul

1li

1button

For example:

1body {2  font-family: Arial, sans-serif;3}

This styles the whole page body.

1a {2  color: darkblue;3}

This styles all links.

When to Use Type Selectors

Use type selectors when you want to set broad, general styles.

For example:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}

This is a good use of a type selector because the body controls general page text.

Another useful example:

1img {2  max-width: 100%;3  height: auto;4}

This helps all images shrink to fit their containers.

Another example:

1p {2  margin-bottom: 1rem;3}

This gives all paragraphs consistent spacing.

Type selectors are good for default styles that should apply widely.

When Type Selectors Can Be Too Broad

Type selectors affect every matching element.

For example:

1button {2  background-color: navy;3  color: white;4}

This applies to every button on the page.

That may be fine, but sometimes different buttons need different styles.

For example:

1<button type=”submit”>Save</button>2<button type=”button”>Cancel</button>

If the buttons need different appearances, classes are usually better:

1<button class=”button button-primary” type=”submit”>Save</button>2<button class=”button button-secondary” type=”button”>Cancel</button>

CSS:

1.button {2  padding: 10px 16px;3}4 5.button-primary {6  background-color: navy;7  color: white;8}9 10.button-secondary {11  background-color: white;12  color: navy;13}

Use type selectors for broad styles.

Use classes for reusable variations.

What Is a Class Selector?

A class selector selects elements with a specific class attribute.

HTML:

1<p class=”note”>This is a note.</p>

CSS:

1.note {2  background-color: #f5f5f5;3}

The dot before note tells CSS that this is a class selector.

The selector:

1.note

matches elements with:

1class=”note”

Classes are reusable.

You can use the same class on many elements.

Class Selector Example

HTML:

1<p class=”note”>First note.</p>2<p class=”note”>Second note.</p>3<p class=”note”>Third note.</p>

CSS:

1.note {2  padding: 12px;3  border: 1px solid #cccccc;4}

All three paragraphs receive the same styling.

This is one of the main advantages of classes.

A class can style a group of related elements.

The Dot in Class Selectors

Class selectors use a dot:

1.note {2  color: blue;3}

The dot means:

1select elements with class=”note”

Do not write the dot in the HTML class value.

Correct HTML:

1<p class=”note”>This is a note.</p>

Incorrect HTML:

1<p class=”.note”>This is a note.</p>

The dot is only used in the CSS selector.

The class attribute value does not include the dot.

Multiple Elements Can Share One Class

A class can be used on many elements.

For example:

1<p class=”highlight”>Important paragraph.</p>2 3<li class=”highlight”>Important list item.</li>4 5<span class=”highlight”>Important word.</span>

CSS:

1.highlight {2  font-weight: bold;3}

This rule applies to all three elements because they all have class="highlight".

The elements are different types, but they share the same class.

Classes are useful when you want repeated styling across different parts of a page.

One Element Can Have Multiple Classes

An element can have more than one class.

Example:

1<p class=”message warning”>Your password is too short.</p>

This paragraph has two classes:

1message2warning

You can style all messages:

1.message {2  padding: 12px;3}

You can also style warnings:

1.warning {2  font-weight: bold;3}

Both rules can apply to the same element.

This lets you combine reusable styles.

Class Names with Hyphens

Class names often use lowercase words separated by hyphens.

Examples:

1<article class=”lesson-card”>

1<p class=”error-message”>

1<button class=”primary-button”>

The matching CSS selectors are:

1.lesson-card {2  padding: 24px;3}

1.error-message {2  color: red;3}

1.primary-button {2  padding: 10px 16px;3}

Hyphens are part of the class name.

They do not split the class into separate classes.

Spaces Create Multiple Classes

This is one class:

1<p class=”error-message”>Error text.</p>

The matching selector is:

1.error-message {2  color: red;3}

This is two classes:

1<p class=”error message”>Error text.</p>

The classes are:

1error2message

You can target them separately:

1.error {2  color: red;3}4 5.message {6  font-weight: bold;7}

A space separates class names.

A hyphen is part of a class name.

When to Use Class Selectors

Use class selectors for reusable styling.

For example:

1<article class=”card”>2  <h2>HTML</h2>3  <p>Learn how pages are structured.</p>4</article>5 6<article class=”card”>7  <h2>CSS</h2>8  <p>Learn how pages are styled.</p>9</article>

CSS:

1.card {2  padding: 24px;3  border: 1px solid #dddddd;4  border-radius: 8px;5}

The same class styles both cards.

Classes are also useful for buttons, messages, layouts, forms, navigation, and repeated components.

What Is an ID Selector?

An ID selector selects an element with a specific id attribute.

HTML:

1<section id=”intro”>2  <h2>Introduction</h2>3</section>

CSS:

1#intro {2  padding: 32px;3}

The hash symbol before intro tells CSS this is an ID selector.

The selector:

1#intro

matches the element with:

1id=”intro”

An ID should be unique on the page.

That means the same ID value should not be used on multiple elements in the same HTML document.

ID Selector Example

HTML:

1<header id=”site-header”>2  <h1>My Website</h1>3</header>

CSS:

1#site-header {2  padding: 24px;3}

This selects the element with:

1id=”site-header”

The rule does not apply to all headers.

It applies only to the element with that exact ID.

This is useful when you need to target one specific element.

The Hash Symbol in ID Selectors

ID selectors use a hash symbol:

1#main-content {2  max-width: 1000px;3}

The hash symbol means:

1select the element with id=”main-content”

Do not write the hash symbol in the HTML ID value.

Correct HTML:

1<main id=”main-content”>

Incorrect HTML:

1<main id=”#main-content”>

The hash symbol belongs in the CSS selector, not in the HTML attribute value.

IDs Should Be Unique

An ID should be used once per page.

Good:

1<header id=”site-header”>…</header>2<main id=”main-content”>…</main>3<footer id=”site-footer”>…</footer>

Each ID is unique.

Avoid:

1<section id=”content”>First section</section>2<section id=”content”>Second section</section>

This repeats the same ID.

Duplicate IDs can cause problems with CSS, JavaScript, links, form labels, and accessibility relationships.

Use classes when several elements need the same styling.

When to Use ID Selectors

Use ID selectors when you need to target one specific element.

For example:

1<main id=”main-content”>

CSS:

1#main-content {2  max-width: 1000px;3  margin: 0 auto;4}

IDs are also useful for page links.

Example:

1<a href=”#contact”>Go to contact section</a>2 3<section id=”contact”>4  <h2>Contact Us</h2>5</section>

The link points to the section with:

1id=”contact”

IDs are useful for unique anchors and specific elements.

For reusable styling, classes are usually more flexible.

Type vs Class vs ID Selectors

These selectors look different in CSS.

Type selector:

1p {2  color: blue;3}

Class selector:

1.note {2  color: blue;3}

ID selector:

1#intro {2  color: blue;3}

The matching HTML might be:

1<p>This paragraph is selected by the type selector.</p>2 3<p class=”note”>This paragraph is selected by the class selector.</p>4 5<section id=”intro”>This section is selected by the ID selector.</section>

A simple memory aid is:

1element name = type selector2dot = class selector3hash = ID selector

Comparing the Three Selector Types

Type selectors are broad.

They select all elements with a given tag name.

1p {2  line-height: 1.6;3}

Class selectors are reusable.

They select elements with a given class.

1.card {2  padding: 24px;3}

ID selectors are specific.

They select one element with a given ID.

1#site-header {2  padding: 24px;3}

Use the selector that matches the job.

Do not use IDs for repeated styles.

Do not use type selectors when you only want to target one part of the page.

Using Type and Class Selectors Together

You can combine a type selector and class selector.

For example:

1p.note {2  color: blue;3}

This selects only <p> elements with class="note".

It matches:

1<p class=”note”>This matches.</p>

It does not match:

1<div class=”note”>This does not match p.note.</div>

because the element is a <div>, not a <p>.

This kind of selector is more specific than .note alone.

Use it when you genuinely need to target a class only on a specific element type.

Using Type and ID Selectors Together

You can also combine a type selector and an ID selector.

Example:

1section#intro {2  padding: 32px;3}

This selects a <section> element with id="intro".

It matches:

1<section id=”intro”>…</section>

It does not match:

1<div id=”intro”>…</div>

because the selector expects a <section>.

In many cases, #intro is enough.

Only add the type selector if it improves clarity or solves a specific problem.

Styling All Elements of a Type Except Some Special Ones

You might use a type selector for general styles and classes for exceptions.

Example:

1p {2  color: #333333;3  line-height: 1.6;4}5 6.intro {7  font-size: 1.2rem;8  font-weight: bold;9}

HTML:

1<p class=”intro”>This is the introduction.</p>2<p>This is a normal paragraph.</p>

Both paragraphs receive the p styles.

The intro paragraph also receives the .intro styles.

This is a common pattern.

Use type selectors for base styles.

Use classes for special cases.

Specificity Basics

CSS specificity helps the browser decide which rule wins when multiple rules target the same element.

For example:

1p {2  color: black;3}4 5.intro {6  color: blue;7}

HTML:

1<p class=”intro”>Welcome to the page.</p>

Both rules target the paragraph.

The class selector is more specific than the type selector, so the text becomes blue.

A basic order from less specific to more specific is:

1type selector2class selector3ID selector

This is a simplified explanation, but it is enough to understand many common cases.

Specificity Example with Type, Class, and ID

CSS:

1p {2  color: black;3}4 5.intro {6  color: blue;7}8 9#main-intro {10  color: green;11}

HTML:

1<p id=”main-intro” class=”intro”>Welcome to the page.</p>

All three rules target the same paragraph.

The type selector says black.

The class selector says blue.

The ID selector says green.

The paragraph will usually appear green because the ID selector is the most specific of these three.

This is why IDs should be used carefully in CSS.

They can be harder to override.

Why Classes Are Usually Best for Styling

Classes are usually the best choice for reusable styling.

For example:

1<article class=”card”>…</article>2<article class=”card”>…</article>3<article class=”card”>…</article>

CSS:

1.card {2  padding: 24px;3  border: 1px solid #dddddd;4}

This is clean and reusable.

If you used IDs instead, each card would need a different ID:

1<article id=”card-one”>…</article>2<article id=”card-two”>…</article>3<article id=”card-three”>…</article>

Then the CSS would be more repetitive:

1#card-one,2#card-two,3#card-three {4  padding: 24px;5}

Classes are more flexible for repeated patterns.

A Complete Example

Here is a complete HTML and CSS example using type, class, and ID selectors.

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Selector Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <header id=”site-header”>11    <h1>CSS Selectors</h1>12  </header>13 14  <main id=”main-content”>15    <p class=”intro”>16      This page shows how type, class, and ID selectors work.17    </p>18 19    <section class=”card”>20      <h2>Type Selectors</h2>21      <p>Type selectors target HTML elements by tag name.</p>22    </section>23 24    <section class=”card”>25      <h2>Class Selectors</h2>26      <p>Class selectors target elements by class name.</p>27    </section>28 29    <section class=”card featured-card”>30      <h2>ID Selectors</h2>31      <p>ID selectors target one unique element by ID.</p>32    </section>33  </main>34 35</body>36</html>

CSS:

1/* Type selectors */2body {3  font-family: Arial, sans-serif;4  line-height: 1.6;5}6 7h1 {8  color: navy;9}10 11p {12  color: #333333;13}14 15/* ID selectors */16#site-header {17  padding: 24px;18}19 20#main-content {21  width: 90%;22  max-width: 900px;23  margin: 0 auto;24}25 26/* Class selectors */27.intro {28  font-size: 1.2rem;29  font-weight: bold;30}31 32.card {33  padding: 24px;34  border: 1px solid #dddddd;35  margin-bottom: 16px;36}37 38.featured-card {39  border-width: 2px;40}

This example uses type selectors for general page styling, IDs for unique layout areas, and classes for reusable components.

How the Complete Example Works

The type selector:

1p {2  color: #333333;3}

styles all paragraphs.

The ID selector:

1#main-content {2  width: 90%;3  max-width: 900px;4  margin: 0 auto;5}

styles the one element with id="main-content".

The class selector:

1.card {2  padding: 24px;3  border: 1px solid #dddddd;4  margin-bottom: 16px;5}

styles every element with class="card".

The featured card has two classes:

1<section class=”card featured-card”>

So it receives both .card styles and .featured-card styles.

Common Mistake: Forgetting the Dot for Classes

Incorrect:

1card {2  padding: 24px;3}

if the HTML is:

1<article class=”card”>

Correct:

1.card {2  padding: 24px;3}

Without the dot, CSS looks for an element called <card>.

With the dot, CSS selects elements with class="card".

Common Mistake: Forgetting the Hash for IDs

Incorrect:

1main-content {2  max-width: 900px;3}

if the HTML is:

1<main id=”main-content”>

Correct:

1#main-content {2  max-width: 900px;3}

Without the hash, CSS looks for an element called <main-content>.

With the hash, CSS selects the element with id="main-content".

Common Mistake: Using the Same ID More Than Once

Incorrect:

1<section id=”card”>First card</section>2<section id=”card”>Second card</section>

Better:

1<section class=”card”>First card</section>2<section class=”card”>Second card</section>

Use a class when the same style applies to multiple elements.

Use an ID when you need one unique element.

Common Mistake: Using a Type Selector When a Class Is Needed

This may be too broad:

1section {2  padding: 32px;3  border: 1px solid #dddddd;4}

It applies to every section.

If only some sections should look like cards, use a class:

1<section class=”card”>…</section>

CSS:

1.card {2  padding: 32px;3  border: 1px solid #dddddd;4}

Classes give you more control.

Common Mistake: Using IDs for Reusable Styles

Less flexible:

1<article id=”card-one”>…</article>2<article id=”card-two”>…</article>

Better:

1<article class=”card”>…</article>2<article class=”card”>…</article>

CSS:

1.card {2  padding: 24px;3}

If a style is reused, use a class.

IDs are not designed for repeated styling patterns.

Common Mistake: Class Name Mismatch

CSS:

1.lesson-card {2  padding: 24px;3}

HTML:

1<article class=”lesson”>

The CSS will not apply because the class names do not match.

Correct HTML:

1<article class=”lesson-card”>

or correct CSS:

1.lesson {2  padding: 24px;3}

Class names must match exactly.

Common Mistake: Writing the Dot or Hash in HTML

Incorrect:

1<p class=”.intro”>Welcome.</p>

Correct:

1<p class=”intro”>Welcome.</p>

Incorrect:

1<main id=”#main-content”>

Correct:

1<main id=”main-content”>

The dot and hash are CSS selector symbols.

They are not part of the HTML attribute value.

Common Mistake: Overusing ID Selectors

ID selectors are powerful because they are highly specific.

For example:

1#intro {2  color: navy;3}

This can be harder to override later than a class selector.

For most styling, prefer classes:

1.intro {2  color: navy;3}

Use IDs mainly for unique sections, page anchors, and specific JavaScript targets.

Use classes for styling components and repeated patterns.

Best Practices

Use type selectors for broad element styles.

Use class selectors for reusable styles and components.

Use ID selectors for unique elements.

Use . for class selectors.

Use # for ID selectors.

Do not include . or # inside HTML class or ID values.

Keep class and ID names clear and meaningful.

Use classes more often than IDs for styling.

Avoid duplicate IDs.

Use type selectors carefully because they affect every matching element.

Use classes when you need more control.

Check that selectors match the HTML exactly.

Use browser developer tools when a selector does not apply.

Summary

CSS selectors choose which HTML elements to style.

A type selector selects elements by tag name:

1p {2  color: blue;3}

A class selector selects elements by class name:

1.note {2  color: blue;3}

An ID selector selects one element by ID:

1#intro {2  color: blue;3}

Type selectors are useful for broad element styles.

Class selectors are useful for reusable styles and components.

ID selectors are useful for unique elements and page anchors.

The main symbols to remember are:

1no symbol = type selector2. = class selector3# = ID selector

Once you understand type, class, and ID selectors, you can target HTML elements much more precisely and write cleaner CSS.