Element (type) selectors

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

A Every element on the page

B Only the first element

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

A True

B False

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

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

B h1 { font-size: 2em; }

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

A True

B False

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1p { color: red; }		ATargets every <h1> element and sets its size and colour — applies to all instances on the page
2h1 { font-size: 2em; color: darkblue; }		BCSS declarations require a colon between property and value — it should be color: red;
3An element selector uses the lowercase HTML tag name with no prefix		Cp { color: blue; }
4Element selectors are the least specific — class and id selectors override them		DElement selectors should be lowercase — use 'p' not 'P' to match HTML convention
5P { color: red; }		Ea { text-decoration: none; }
6p { color red; }		FTargets every <p> element on the page and sets its text colour to red

Definitions

p { }

Fill in the Blanks

Complete each line of code by filling in the missing parts.

_ { color: red; }

__ { font-size: 32px; }

p { _____: navy; }

_ { text-decoration: none; }

__ { list-style: none; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A P { color: red; }

B h2 { font-size: 24px; }

C a { text-decoration: none; }

Question 2

A p { color: blue; }

B h1 { color red; }

C a { color: green; }

Question 3

A p { color: navy; }

B h2 { font-weight: bold; }

C a { text-decoration none; }

Question 4

A p { color: red; }

B h1 { font-size: 32px; }

C ul { list-style: disc; }

D li { 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; }

Answer Key

Element (type) selectors

Section A: Quick Questions

A — The lowercase HTML tag name: p, h1, a

A — Every element on the page

B — False

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

A — True

Section B: 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;

Section C: Definitions

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.

Section D: Fill in the Blanks

p { color: red; }

h1 { font-size: 32px; }

p { color: navy; }

a { text-decoration: none; }

ul { list-style: none; }

Section E: Spot the Error

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

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

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

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

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