• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top