Bird
Raised Fist0
CSSmarkup~15 mins

Absolute units in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Using Absolute Units in CSS
📖 Scenario: You are creating a simple webpage with a heading and a paragraph. You want to use absolute units in CSS to set the font sizes and spacing so that they stay consistent regardless of screen size.
🎯 Goal: Build a webpage with a heading and a paragraph. Use absolute CSS units cm and in to set the font size of the heading and the margin of the paragraph.
📋 What You'll Learn
Create an HTML skeleton with a <h1> heading and a <p> paragraph.
Use CSS to set the heading font size to 2cm.
Use CSS to set the paragraph margin to 1in on all sides.
Ensure the CSS is included inside a <style> tag in the HTML <head>.
Use semantic HTML and include lang and charset meta tags.
💡 Why This Matters
🌍 Real World
Absolute units are useful when you want precise physical measurements on printed pages or fixed-size displays.
💼 Career
Web developers often need to control layout and typography precisely, especially for print styles or specialized devices.
Progress0 / 4 steps
1
Create the HTML structure
Create a basic HTML5 skeleton with lang="en" in the <html> tag. Inside the <head>, add a <meta charset="UTF-8"> tag and a <title> with the text "Absolute Units Example". In the <body>, add a <h1> with the text "Welcome to Absolute Units" and a <p> with the text "This paragraph uses absolute units for margin."
CSS
Hint

Start by writing the basic HTML structure with the required tags and text exactly as specified.

2
Add a CSS style block
Inside the <head> tag, add a <style> block where you will write CSS rules. Just add the opening and closing <style> tags for now.
CSS
Hint

Put the <style> tags inside the <head> section to add CSS.

3
Set the heading font size using absolute units
Inside the <style> block, write a CSS rule for the h1 element that sets its font-size to 2cm.
CSS
Hint

Use the CSS property font-size with the value 2cm inside the h1 selector.

4
Set the paragraph margin using absolute units
Inside the same <style> block, add a CSS rule for the p element that sets its margin to 1in on all sides.
CSS
Hint

Use the CSS property margin with the value 1in inside the p selector.

Practice

(1/5)
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