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).

Practice

1. Which of the following is an example of an absolute CSS unit?

easy

A. em

B. %

C. rem

D. cm

Solution

1. Step 1: Understand absolute vs relative units

   Absolute units are fixed sizes that do not change with screen or zoom, like centimeters (cm), inches (in), pixels (px).

2. Step 2: Identify the absolute unit in options

   cm is an absolute unit, while em, rem, and % are relative units.

3. Final Answer:

   cm -> Option D

4. Quick Check:

   Absolute unit = cm [OK]

Hint: Absolute units are fixed sizes like cm, in, px [OK]

Common Mistakes:

• Confusing relative units like em or rem as absolute
• Thinking % is absolute unit
• Mixing up px as relative

2. Which CSS syntax correctly sets a width of 5 centimeters?

easy

A. width: 5 cm;

B. width: 5 cm

C. width = 5cm;

D. width: 5cm;

Solution

1. Step 1: Check correct CSS property syntax

   CSS properties use colon (:) after property name and end with semicolon (;). Spaces between number and unit are allowed but not recommended.

2. Step 2: Identify correct spacing and punctuation

   width: 5 cm; is correct. Equal sign is invalid.

3. Final Answer:

   width: 5 cm; -> Option A

4. Quick Check:

   Correct CSS syntax = width: 5 cm; [OK]

Hint: Use colon and semicolon; space between number and unit is allowed [OK]

Common Mistakes:

• Using equal sign instead of colon
• Omitting semicolon at end

3. What will be the width of the box in the browser if the CSS is:

div { width: 2in; }

medium

A. 2 inches on screen

B. 2 pixels

C. 2 centimeters

D. 2 points

Solution

1. Step 1: Understand the in unit meaning

   in stands for inches, an absolute unit representing physical inches on screen or print.

2. Step 2: Interpret the CSS width value

   The width is set to 2 inches, so the box will be exactly 2 inches wide on the screen or print.

3. Final Answer:

   2 inches on screen -> Option A

4. Quick Check:

   2in means 2 inches width [OK]

Hint: in means inches, so width is in inches [OK]

Common Mistakes:

• Confusing inches with pixels
• Thinking in is relative unit
• Assuming 2in equals 2cm

4. Identify the error in this CSS code:

p { font-size: 12 pt; }

medium

A. Missing semicolon after property

B. Space between number and unit is invalid

C. Incorrect property name

D. Unit pt is not an absolute unit

Solution

1. Step 1: Check CSS unit syntax

   In CSS, there should be no space between the number and the unit. 12 pt is invalid.

2. Step 2: Confirm the correct usage

   The correct syntax is font-size: 12pt; with no space.

3. Final Answer:

   Space between number and unit is invalid -> Option B

4. Quick Check:

   No space between number and unit [OK]

Hint: No space allowed between number and unit [OK]

Common Mistakes:

• Adding space between number and unit
• Thinking pt is invalid unit
• Forgetting semicolon

5. You want to create a print stylesheet where a box is exactly 3 centimeters wide and 1 inch tall. Which CSS snippet correctly sets this using absolute units?

hard

A. box { width: 3in; height: 1in; }

B. box { width: 3cm; height: 1cm; }

C. box { width: 3cm; height: 1in; }

D. box { width: 3px; height: 1in; }

Solution

1. Step 1: Match width and height units to requirements

   The width must be 3 centimeters and height 1 inch, so use 3cm for width and 1in for height.

2. Step 2: Verify the CSS syntax correctness

   The syntax box { width: 3cm; height: 1in; } is correct and uses absolute units as required.

3. Final Answer:

   box { width: 3cm; height: 1in; } -> Option C

4. Quick Check:

   Use correct absolute units for each dimension [OK]

Hint: Use cm for centimeters and in for inches exactly [OK]

Common Mistakes:

• Mixing units for width and height
• Using pixels instead of absolute units
• Using same unit for both dimensions incorrectly