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