Width and height

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. What does max-width: 100% do on an image?

A Prevents the image from exceeding its container's width

B Stretches the image to always fill its container

2. Which property sets the minimum vertical size of an element?

A min-width

B min-height

3. True or false: width: 50% is relative to the viewport width.

A False

B True

4. True or false: CSS property names like 'Width' with a capital letter are valid.

A False

B True

5. What does min-width: 200px do?

A Sets the element's width to exactly 200px

B Prevents the element from being narrower than 200px

Match the Pairs

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

Left column		Right column
1div { width: 800px; max-width: 100%; }		ACSS property names must be lowercase — 'Width' should be written as 'width'
2img { max-width: 100%; }		BPrevents the image from exceeding its container — it can be its natural size or smaller but never wider
3min-height prevents an element from being shorter than the specified value		CFixed 800px wide on large screens, but shrinks to fit its container on smaller screens — responsive sizing
4% widths are relative to the parent element's width, not the viewport		D'widht' is a typo — the correct CSS property name is 'width'
5p { widht: 200px; }		Ep { width: 100%; }
6div { Width: 300px; }		Fsection { min-height: 50vh; }

Definitions

max-width

Fill in the Blanks

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

div { _____: 300px; }

div { ______: 200px; }

img { _________: 100%; }

section { __________: 50vh; }

p { _________: 200px; }

Spot the Error

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

Question 1

A p { width 200px; }

B h1 { height: 100px; }

C div { width: 50%; }

Question 2

A div { width: 300px; }

B img { height 150px; }

C p { max-width: 600px; }

Question 3

A div { max-width: 800px; }

B p { width: 100%; }

C img { width: 50 %; }

Question 4

A div { width: 400px; }

B p { min-height: 100px; }

C img { max-width: 100%; }

D section { height: 50 vh; }

Question 5

A p { width: 100%; }

B div { height: 200px; }

C img { max-width: 100%; }

D section { min-height: 50vh; }

E a { width: 120 px; }

Answer Key

Width and height

Section A: Quick Questions

A — Prevents the image from exceeding its container's width

B — min-height

A — False

B — Prevents the element from being narrower than 200px

Section B: Match the Pairs

div { width: 800px; max-width: 100%; } → Fixed 800px wide on large screens, but shrinks to fit its container on smaller screens — responsive sizing

img { max-width: 100%; } → Prevents the image from exceeding its container — it can be its natural size or smaller but never wider

min-height prevents an element from being shorter than the specified value → section { min-height: 50vh; }

% widths are relative to the parent element's width, not the viewport → p { width: 100%; }

p { widht: 200px; } → 'widht' is a typo — the correct CSS property name is 'width'

div { Width: 300px; } → CSS property names must be lowercase — 'Width' should be written as 'width'

Section C: Definitions

max-width — A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.

Section D: Fill in the Blanks

div { width: 300px; }

div { height: 200px; }

img { max-width: 100%; }

section { min-height: 50vh; }

p { min-width: 200px; }

Section E: Spot the Error

A — CSS declarations require a colon. It should be width: 200px; not width 200px;

B — CSS declarations require a colon. It should be height: 150px; not height 150px;

C — There must be no space between the number and the unit. It should be width: 50%; not width: 50 %;

D — There must be no space between the number and the unit. It should be height: 50vh; not height: 50 vh;

E — There must be no space between the number and the unit. It should be width: 120px; not width: 120 px;