CSSmarkup~15 mins

Absolute units in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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.

Need a hint?

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

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.

Need a hint?

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

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.

Need a hint?

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

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.

Need a hint?

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