Anatomy of a CSS rule: selector, property and value

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which is a correctly written CSS rule?

A p ( color = blue )

B p { color: blue; }

2. In the rule h1 { color: red; }, which part is the selector?

A h1

B color

3. In the declaration font-size: 20px; what is 20px?

A The value

B The property

4. Which declaration is written correctly?

A background-color: yellow;

B background-color = yellow;

5. What do the curly braces { } hold in a CSS rule?

A The selector

B The declarations

Match the Pairs

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

Left column		Right column
1h1 { color: red; }		ARound brackets are used instead of curly braces. The declaration block must sit inside { }.
2/* make text bigger */		Bp { color: blue; font-size: 18px; }
3One rule can hold several declarations, each ending with a semicolon inside the same curly braces.		CA CSS rule: the selector h1 picks every main heading, and the declaration inside the braces turns its text red.
4A declaration is a property, a colon, a value and a semicolon.		DA CSS comment: the browser ignores it, so it is a note for people reading the stylesheet.
5p { color blue; }		EThe colon is missing between the property and the value. It should be color: blue;
6p ( color: blue; )		Fbackground-color: yellow;

Definitions

p { color: blue; }

Fill in the Blanks

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

_ { color: blue; }

p { _____: blue; }

p { color_ blue; }

h1 { color: red; _________: 24px; }

__ Paragraph style */ p { color: blue; }

Spot the Error

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

Question 1

A p {

B color: blue;

C font-size: 16px;

D text-align = center;

E }

Question 2

A h1 {

B color red;

C margin: 0;

D }

Question 3

A h2 (

B color: green;

C margin: 10px;

D }

Question 4

A /* Style the links */

B a {

C color: purple:

D }

Question 5

A p {

B color: black;

C // tight spacing

D margin: 0;

E }

Answer Key

Anatomy of a CSS rule: selector, property and value

Section A: Quick Questions

B — p { color: blue; }

A — h1

A — The value

A — background-color: yellow;

B — The declarations

Section B: Match the Pairs

h1 { color: red; } → A CSS rule: the selector h1 picks every main heading, and the declaration inside the braces turns its text red.

/* make text bigger */ → A CSS comment: the browser ignores it, so it is a note for people reading the stylesheet.

One rule can hold several declarations, each ending with a semicolon inside the same curly braces. → p { color: blue; font-size: 18px; }

A declaration is a property, a colon, a value and a semicolon. → background-color: yellow;

p { color blue; } → The colon is missing between the property and the value. It should be color: blue;

p ( color: blue; ) → Round brackets are used instead of curly braces. The declaration block must sit inside { }.

Section C: Definitions

p { color: blue; } — A CSS rule: a selector (p) picks elements, then { } hold declarations. Each declaration is property, colon, value, semicolon, so all paragraphs get blue text.

Section D: Fill in the Blanks

p { color: blue; }

h1 {
  color: red;
  font-size: 24px;
}

/* Paragraph style */
p { color: blue; }

Section E: Spot the Error

D — A declaration needs a colon between the property and the value, not an equals sign. It should be text-align: center;

B — The colon between the property and the value is missing. It should be color: red;

A — The declarations of a rule go inside curly braces { }, not round brackets. It should be h2 {

C — Each declaration must end with a semicolon, not a colon. It should be color: purple;

C — CSS comments use /* and */, not //. It should be /* tight spacing */