CSS Units Practice Questions with Solutions

By /

Introduction

CSS units define the size of elements, text, spacing, and layouts. They are divided into absolute units (such as px, cm, and mm) and relative units (such as %, em, rem, vw, and vh). Choosing the correct unit helps create responsive and user-friendly websites. In this chapter, you’ll practice CSS units through simple solved CSS Units practice questions that are easy for beginners to understand.

Question 1: Set Width Using Pixels

Problem Statement

Write CSS to set the width of a <div> to 300 pixels.

CSS Code

div {    width: 300px;}

Output

The <div> displays with a fixed width of 300 pixels.

Explanation

  • px stands for pixels.
  • It is an absolute unit.
  • The width remains fixed regardless of the screen size.

Question 2: Set Width Using Percentage

Problem Statement

Write CSS to make a <div> occupy 50% of its parent element’s width.

CSS Code

div {    width: 50%;}

Output

The <div> occupies half of its parent container’s width.

Explanation

  • % is a relative unit.
  • The width changes according to the parent element.
  • It is commonly used in responsive layouts.

Question 3: Set Font Size Using em

Problem Statement

Write CSS to set the font size of a paragraph to 1.5 times its parent element’s font size.

CSS Code

p {    font-size: 1.5em;}

Output

The paragraph text appears 1.5 times larger than its parent’s font size.

Explanation

  • em is a relative unit.
  • It is calculated based on the font size of the parent element.
  • It is useful for scalable typography.

Question 4: Set Font Size Using rem

Problem Statement

Write CSS to set the font size of a heading to 2 times the root font size.

CSS Code

h1 {    font-size: 2rem;}

Output

The heading appears twice the size of the root font size.

Explanation

  • rem stands for root em.
  • It is based on the root (html) font size.
  • rem provides consistent sizing across the webpage.

Question 5: Set Height Using Viewport Height

Problem Statement

Write CSS to make a section occupy the full height of the browser window.

CSS Code

section {    height: 100vh;}

Output

The section fills the entire browser window height.

Explanation

  • vh stands for viewport height.
  • 100vh equals 100% of the browser window height.
  • It is commonly used for hero sections and landing pages.

Question 6: Set Width Using Viewport Width (vw)

Problem Statement

Write CSS to make a <div> occupy 80% of the browser window’s width.

CSS Code

div {    width: 80vw;}

Output

The <div> occupies 80% of the browser viewport width.

Explanation

  • vw stands for viewport width.
  • 80vw equals 80% of the browser window’s width.
  • It is commonly used for responsive layouts.

Question 7: Set Margin Using em

Problem Statement

Write CSS to add a margin equal to the current font size around a paragraph.

CSS Code

p {    margin: 1em;}

Output

The paragraph displays with a margin equal to one times its current font size.

Explanation

  • em is a relative unit.
  • Margin changes according to the element’s font size.
  • It helps create scalable spacing.

Question 8: Set Padding Using rem

Problem Statement

Write CSS to add padding equal to the root font size inside a <div>.

CSS Code

div {    padding: 1rem;}

Output

The <div> displays with padding equal to the root font size.

Explanation

  • rem is based on the root (html) font size.
  • It creates consistent spacing throughout the website.
  • rem is commonly used in responsive web design.

Question 9: Set Maximum Width Using Percentage

Problem Statement

Write CSS to ensure an image never becomes wider than its parent container.

CSS Code

img {    max-width: 100%;}

Output

The image automatically adjusts to fit inside its parent container.

Explanation

  • max-width: 100%; prevents images from overflowing.
  • It keeps images responsive.
  • This technique is widely used in modern websites.

Question 10: Set Minimum Height Using vh

Problem Statement

Write CSS to make a section at least 50% of the browser window height.

CSS Code

section {    min-height: 50vh;}

Output

The section always remains at least half the height of the browser window.

Explanation

  • min-height defines the minimum height of an element.
  • 50vh equals 50% of the viewport height.
  • This property is useful for responsive page sections.

Key Takeaways

  • px is an absolute unit used for fixed sizes.
  • % creates sizes relative to the parent element.
  • em is based on the current or parent font size.
  • rem is based on the root (html) font size.
  • vw represents a percentage of the viewport width.
  • vh represents a percentage of the viewport height.
  • max-width: 100%; keeps images responsive.
  • Choosing the correct unit improves responsiveness and accessibility.

Frequently Asked Questions (FAQs)

1. What are CSS units?

CSS units define the size of elements, text, spacing, margins, padding, and layouts.

2. What is the difference between absolute and relative units?

  • Absolute units (such as px) remain fixed.
  • Relative units (such as %, em, rem, vw, and vh) change based on their reference values.

3. What is the px unit?

px (pixel) is an absolute unit that creates fixed-size elements.

Example:

div {    width: 300px;}

4. What is the difference between em and rem?

  • em is based on the font size of the parent element.
  • rem is based on the root (html) font size.

5. What do vw and vh mean?

  • vw = Viewport Width
  • vh = Viewport Height

Both are responsive units based on the browser window size.

6. Why is max-width: 100%; commonly used for images?

It prevents images from overflowing their parent container and helps create responsive web pages.

7. Which CSS units are best for responsive web design?

The most commonly used responsive units are:

  • %
  • em
  • rem
  • vw
  • vh

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top