← HTML & CSS

Element (type) selectors

An element selector that targets every element on the page. The tag name is used directly as the selector, followed by a CSS declaration block.

Part of: HTML and CSS Journey — Module 34

What it does: 'a' is the HTML tag name used directly as a CSS selector. No dot or hash prefix — that's the element selector pattern. This p rule can be overridden by a .intro { color: red } class rule or a #lead { color: green } ID rule. Element selectors are global — they apply to every element of that type on the page, not just the first one. Element selectors have the lowest specificity. Class selectors (0,1,0) and ID selectors (1,0,0) override them. The selector is followed by a space and then the opening brace. A colon after the selector name is invalid CSS.

Common mistakes: CSS element selectors should be lowercase. 'P' should be written as 'p'. CSS property-value pairs require a colon separator. It should be color: red; not color red;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Element (type) selectors (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

What syntax does an element selector use?

The lowercase HTML tag name: p, h1, aA dot followed by the tag name: .p, .h1

Matches

P { color: red; }

↓

Element selectors should be lowercase — use 'p' not 'P' to match HTML convention

Applying

Meanings

Term

p { }

Meaning

An element selector that targets every element on the page. The tag name is used directly as the selector, followed by a CSS declaration block.

Practice

p {

Testing

Gaps

{ color: red; }

Check Answer

Spots

1P { color: red; }

2h2 { font-size: 24px; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. What syntax does an element selector use?

A. The lowercase HTML tag name: p, h1, a ✓

B. A dot followed by the tag name: .p, .h1

Element selectors use the tag name directly with no prefix. A dot prefix is used for class selectors.

2. What does p { color: blue; } target?

A. Every element on the page ✓

B. Only the first element

Element selectors are global — they apply to every element of that type on the page, not just the first one.

3. True or false: element selectors are the most specific type of CSS selector.

A. False ✓

B. True

Element selectors have the lowest specificity. Class selectors (0,1,0) and ID selectors (1,0,0) override them.

4. Which is the correct CSS syntax for an element selector?

A. h1 { font-size: 2em; } ✓

B. h1: { font-size: 2em; }

The selector is followed by a space and then the opening brace. A colon after the selector name is invalid CSS.

5. True or false: a { text-decoration: none; } removes the underline from all links.

A. True ✓

B. False

The a selector targets all anchor elements. Setting text-decoration: none removes the default underline from every link on the page.

Match the Pairs

p { color: red; } → Targets every element on the page and sets its text colour to red

h1 { font-size: 2em; color: darkblue; } → Targets every <h1> element and sets its size and colour — applies to all instances on the page

An element selector uses the lowercase HTML tag name with no prefix → a { text-decoration: none; }

Element selectors are the least specific — class and id selectors override them → p { color: blue; }

P { color: red; } → Element selectors should be lowercase — use 'p' not 'P' to match HTML convention

p { color red; } → CSS declarations require a colon between property and value — it should be color: red;

Key Term

p { }

An element selector that targets every element on the page. The tag name is used directly as the selector, followed by a CSS declaration block.

Fill in the Blanks

1. p { color: red; }

Hint: Type the HTML element name used as a CSS selector to style all paragraphs

2. h1 { font-size: 32px; }

Hint: Type the HTML element name used as a CSS selector to style all level-1 headings

3. p { color: navy; }

Hint: Type the CSS property name that sets the text colour of an element

4. a { text-decoration: none; }

Hint: Type the HTML element name used as a CSS selector to style all links

5. ul { list-style: none; }

Hint: Type the HTML element name used as a CSS selector to style all unordered lists

Spot the Error

Question 1

A P { color: red; }

B h2 { font-size: 24px; }

C a { text-decoration: none; }

Line A — CSS element selectors should be lowercase. 'P' should be written as 'p'.

Question 2

A p { color: blue; }

B h1 { color red; }

C a { color: green; }

Line B — CSS property-value pairs require a colon separator. It should be color: red; not color red;

Question 3

A p { color: navy; }

B h2 { font-weight: bold; }

C a { text-decoration none; }

Line C — CSS property-value pairs require a colon separator. It should be text-decoration: none; not text-decoration none;

Question 4

A p { color: red; }

B h1 { font-size: 32px; }

C ul { list-style: disc; }

D li { color blue; }

Line D — CSS property-value pairs require a colon separator. It should be color: blue; not color blue;

Question 5

A p { margin: 0; }

B h2 { color: navy; }

C ul { padding: 0; }

D li { list-style: none; }

E a { color red; }

Line E — CSS property-value pairs require a colon separator. It should be color: red; not color red;

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?