Absolute units in CSS - Mini Project: Build & Apply

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.

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

    
    Absolute Units Example


    Welcome to Absolute Units
    This paragraph uses absolute units for margin.
    

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

    
    Absolute Units Example
    
    /* Your CSS will go here */
    


    Welcome to Absolute Units
    This paragraph uses absolute units for margin.

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

    
    Absolute Units Example
    
    h1 {
        /* Set font size to 2cm */
    }
    


    Welcome to Absolute Units
    This paragraph uses absolute units for margin.

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

    
    Absolute Units Example
    
    h1 {
        font-size: 2cm;
    }
    p {
        /* Set margin to 1in */
    }
    


    Welcome to Absolute Units
    This paragraph uses absolute units for margin.

Hint

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

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