Absolute units in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size to 12 pixels.

CSS

p { font-size: 12[1]; }

Drag options to blanks, or click blank then click option'

Apx

Bem

C%

Drem

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative units like em or rem instead of pixels.

Forgetting to add a unit after the number.

The px unit sets the font size in pixels, which is an absolute unit.

2fill in blank

medium

Complete the code to set the width of the box to 5 centimeters.

CSS

.box { width: 5[1]; }

Drag options to blanks, or click blank then click option'

Amm

Bpt

Cin

Dcm

Attempts:

3 left

💡 Hint

Common Mistakes

Using millimeters (mm) instead of centimeters (cm).

Using inches (in) when centimeters are asked.

The cm unit stands for centimeters, an absolute length unit.

3fill in blank

hard

Fix the error in the code to set the margin to 1 inch.

CSS

div { margin: 1[1]; }

Drag options to blanks, or click blank then click option'

Apx

Bem

Cin

Dpt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pt' (points) instead of inches.

Using relative units like 'em' or 'px' instead of inches.

The in unit stands for inches, an absolute unit used for lengths.

4fill in blank

hard

Fill both blanks to set the border width to 10 points and padding to 20 millimeters.

CSS

div { border-width: 10[1]; padding: 20[2]; }

Drag options to blanks, or click blank then click option'

Apt

Bpx

Cmm

Dcm

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up points and pixels.

Using centimeters instead of millimeters for padding.

pt means points, often used for borders. mm means millimeters, used here for padding.

5fill in blank

hard

Fill all three blanks to set height to 3 inches, width to 7 centimeters, and font size to 14 points.

CSS

section { height: 3[1]; width: 7[2]; font-size: 14[3]; }

Drag options to blanks, or click blank then click option'

Acm

Bpt

Cin

Dmm

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping units between height and width.

Using pixels instead of points for font size.

Height uses inches (in), width uses centimeters (cm), and font size uses points (pt).