• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Units

← Previous Next →

🔹 What Are CSS Units?

CSS Units define the measurement system used for lengths, sizes, positions, margins, paddings, font sizes, and more. There are two main types of units:

  • Absolute units: Fixed sizes (e.g., px, cm)

  • Relative units: Flexible sizes based on parent or viewport (e.g., em, %, vw)

🔸 1. Absolute Units

Unit Description Example
px Pixels font-size: 16px;
cm Centimeters width: 10cm;
mm Millimeters height: 15mm;
in Inches width: 2in;
pt Points (1/72 inch) font-size: 12pt;
pc Picas (12 points) font-size: 1pc;

🔹 Use absolute units when you need precise measurements, like in printing.

🔸 2. Relative Units

Unit Description Example
% Relative to parent element width: 50%;
em Relative to the element’s font-size padding: 2em;
rem Relative to the root element’s font-size font-size: 1.5rem;
vw 1% of the viewport’s width width: 80vw;
vh 1% of the viewport’s height height: 90vh;
vmin Smaller of vw or vh font-size: 4vmin;
vmax Larger of vw or vh font-size: 4vmax;
ch Width of the character 0 in the font width: 60ch;
ex Height of lowercase x in the font line-height: 1ex;

🔹 Use relative units for responsive design and accessibility.

🔸 Example: em vs rem

html {
  font-size: 16px;
}

div {
  font-size: 2em; /* 32px (relative to parent) */
}

p {
  font-size: 1.5rem; /* 24px (relative to root) */
}

🔸 Viewport Units Example

.section {
  height: 100vh;  /* Full screen height */
  width: 100vw;   /* Full screen width */
}

Practice Questions

Q1. Set a div width to 500 pixels.

Q2. Set font size to 2em inside a div.

Q3. Make a section full height of the screen using vh.

Q4. Set padding as 10% of the parent width.

Q5. Make a container 60 characters wide using ch.

Q6. Use rem to define font size of 24px (assuming root is 16px).

Q7. Set image width to 80% of its parent.

Q8. Create a box that is 5cm wide and 2in tall.

Q9. Use vmin to adjust font-size for small screens.

Q10. Create two divs with widths 60vw and 40vw side by side.

CSS Units Quiz

Q1: Which of the following is an absolute unit?

A. px
B. em
C. %
D. rem

Q2: What does em depend on?

A. The element's own or parent’s font-size
B. Viewport width
C. Root font-size
D. Browser zoom

Q3: Which unit is relative to the root element’s font-size?

A. em
B. rem
C. vh
D. ch

Q4: What does vw stand for?

A. Value width
B. Viewport width
C. Visual width
D. Vertical width

Q5: What does 100vh represent?

A. 100% of container
B. 100% of viewport height
C. Full page height
D. Fixed height

Q6: Which unit adjusts based on screen size?

A. px
B. %
C. in
D. cm

Q7: Which unit is ideal for printing purposes?

A. rem
B. in
C. vh
D. em

Q8: What is the difference between em and rem?

A. rem is bigger
B. em depends on parent; rem on root
C. rem is for width only
D. Both are same

Q9: Which of the following represents height of lowercase x?

A. ch
B. px
C. ex
D. vw

Q10: If html font-size is 16px, what is 1.5rem?

A. 12px
B. 24px
C. 16px
D. 32px
← Previous Next →
Login
Go Back Top