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.