Absolute units in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Absolute Units in CSS

Which of the following CSS units is considered an absolute unit and does NOT scale with the user's browser settings or screen resolution?

A em

B px

C vw

D rem

💡 Hint

Think about units that always represent the same physical size regardless of user settings.

The px unit is a relative unit that represents pixels on the screen. It does not scale with user settings like font size but can be affected by screen resolution and zoom. The others (em, rem, vw) are relative units.

📝 Syntax

intermediate

CSS Absolute Unit Syntax

Which CSS rule correctly sets the font size to 12 points using an absolute unit?

CSS

p { font-size: ?; }

A 12pt;

B 12px;

C 12em;

D 12%

💡 Hint

Points (pt) are an absolute unit used in print and screen.

The pt unit stands for points, an absolute unit commonly used in print. The syntax requires the number followed immediately by the unit without spaces.

❓ rendering

advanced

Visual Effect of Absolute Units

Given the CSS below, what will be the visual width of the div on a screen with 96 DPI (dots per inch)?

CSS

div { width: 2in; border: 1px solid black; }

A 96 pixels wide

B 2 pixels wide

C 192 pixels wide

D Depends on viewport width

💡 Hint

1 inch equals 96 pixels on standard screens.

CSS defines 1 inch as 96 pixels. So 2 inches equals 192 pixels wide. The border adds 1 pixel around but does not change the width property.

❓ selector

advanced

Using Absolute Units in Media Queries

Which media query correctly targets devices with a minimum width of 8 centimeters?

CSS

@media (min-width: ?) { body { background: lightblue; } }

A 8cm

B 8px

C 8rem

D 8vw

💡 Hint

Centimeters (cm) are an absolute unit representing physical length.

The cm unit is an absolute unit representing centimeters. Using min-width: 8cm targets devices with viewport width at least 8 centimeters wide.

❓ accessibility

expert

Accessibility Concerns with Absolute Units

Why might using absolute units like px for font sizes cause accessibility issues for some users?

A Because absolute units automatically scale text size based on user preferences, causing inconsistent layouts.

B Because absolute units only work on mobile devices and not desktops.

C Because absolute units cause syntax errors in CSS, preventing styles from applying.

D Because absolute units ignore user browser zoom and font size settings, making text harder to read for users with visual impairments.

💡 Hint

Think about how users adjust text size for readability.

Using absolute units like px fixes text size and does not respect user zoom or font size preferences, which can make reading difficult for users who need larger text.

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