Definition and Usage

The type selector (also called the element selector) matches elements by their tag name — for example p, h1, or a.

It styles every element of that type in the document. Prefer a class when you need only some paragraphs or buttons. Combine both with element.class when the tag and class must match together.

CSS Syntax

Examples: p · h1 · a · ul · button

Selector Forms

How to Use the Type Selector

Write the HTML tag name, then the declarations.

1. Choose the tag to style (p, h2, li, …).
2. Use that name as the selector — no dot, no hash.
3. Add only styles that should apply to all of those tags.
4. Switch to a class when you need a smaller subset.

Live Preview

Switch which type selector is active. Highlighted text shows what p, h2, or span would match.

CSS Examples

Each snippet focuses on the type selector. Use Try It Yourself for a live editor.

<style>
  p {
    color: #334155;
  }
</style>

<p>First paragraph</p>
<p>Second paragraph</p>
<h2>Not a paragraph</h2>

<style>
  h1 {
    color: #2563eb;
  }
</style>

<h1>Page title</h1>
<h2>Section title</h2>

<style>
  a {
    color: #1d4ed8;
    text-decoration: none;
  }
</style>

<p><a href="#">Docs</a> and <a href="#">Blog</a></p>

Key Takeaways