Type selectors

Learn selectors that match by tag name.

What is a type selector?

In CSS, a type selector writes the HTML tag name directly. No angle brackets, just the name. For example, the p selector matches every paragraph on the page; h1 matches all first-level headings; a matches all links.

Type selectors are blunt: they grab every matching element. That makes them great for site-wide default styles — one line, dozens of elements.

It styles every match

When you write a type selector, the browser finds every element with that tag and applies the same styles. If you write h1 { font-family: serif; }, every h1 on the page uses the same family.

Add a new h1 later and it picks up the same look automatically. That is why type selectors are ideal for a consistent baseline.

Several type selectors

In a real stylesheet, several type selectors work side by side. body, h1, p, a — each sets a different baseline and the browser applies them all together.

If two type selectors set the same property with different values, the one written later in the file wins. We will revisit this in later lessons.

Exercise Set a color for h2

Write an h2 type selector and assign color: navy. The selector starts with the tag name; no angle brackets.

Show example solution

/* add the h2 selector */
h2 {
  color: navy;
}

Test yourself

What does the p selector match?
```
p {
  line-height: 1.5;
}
```
- Only the element with id 'p'
- All paragraphs on the page
- Only elements whose class is 'p'
- Nothing, it is an invalid selector
Show answer

All paragraphs on the page — Correct. p is a type selector and matches all paragraphs on the page.

Write the paragraph selector

____ {
  line-height: 1.5;
  color: #333;
}

Show answer

p {
  line-height: 1.5;
  color: #333;
}

Match each type selector to its target

p

All paragraphs
h1

First-level heading
a

All links
img

All images

Next lesson: Class and ID selectors

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies