CSS

CSS

🎨 CSS Sizing Units

CSS sizing units are used to define the size of elements on a webpage.

They control properties such as:

  • Width
  • Height
  • Font size
  • Margin and padding
  • Borders
  • Positioning

CSS units are divided into two main categories:

  • 1.Relative Units
  • 2.Absolute Units

πŸ”Ή 1. Relative Units

Relative units are flexible units calculated relative to another value, such as:

  • Parent element size
  • Root font size
  • Viewport size

Because they are flexible, they are very useful for responsive web design.

πŸ“˜ Common Relative Units

Unit Description Example
em Relative to the current element’s font size 1em = 16px (example)
rem Relative to the root (html) font size 1rem = 16px
ex Based on the height of lowercase (x) Rarely used
ch Based on the width of the (0) character 1ch β‰ˆ width of one character
vw 1% of the viewport width 50vw = half screen width
vh 1% of the viewport height 100vh = full screen height
vmin 1% of the smaller viewport dimension Responsive layouts
vmax 1% of the larger viewport dimension Large-screen layouts
% Relative to the parent element 50% = half of parent size
CSS

.container {
  width: 80%;
  font-size: 1.2rem;
  height: 50vh;
}

πŸ” Explanation:

  • 80% β†’ Relative to the parent width
  • 1.2rem β†’ Relative to the root font size
  • 50vh β†’ Half of the viewport height

πŸ”Ή 2. Absolute Units

Absolute units are fixed-size units.

They do not automatically adapt to screen size or parent elements.

These units are often used for:

  • Print design
  • Static layouts
  • Precise measurements

πŸ“˜ Common Absolute Units

Unit Description
px Pixel β€” most common screen unit
pt Point β€” commonly used in print
pc Pica β€” equal to 12 points
mm Millimeter
cm Centimeter
in Inch (1in = 96px)

πŸ’‘ Example of Absolute Units

CSS

h1 {
  font-size: 32px;
}

.print-area {
  width: 10cm;
}

πŸ“± Viewport Units Explained

Viewport units are based on the browser window size.

Unit Meaning
1vw 1% of viewport width
1vh 1% of viewport height
CSS

.hero {
  width: 100vw;
  height: 100vh;
}

βœ… This creates a section that fills the entire screen.

🧠 Difference Between em and rem

This is one of the most important CSS concepts.

πŸ“˜ em

em is relative to the font size of the current element.

CSS

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

βœ… Result:

CSS
2em = 40px

Because 2 Γ— 20px = 40px.

πŸ“˜ rem

rem is always relative to the root ( html ) font size.

CSS

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

βœ… Result:

CSS
2rem = 32px

πŸ“Š Recommended Usage

Purpose Recommended Units
Responsive layouts %, vw, vh, rem, em
Font sizing rem, em
Fixed UI elements px
Printing cm, mm, pt, in

⚠️ Best Practices

βœ… Use rem for Typography

rem creates more consistent and scalable font sizing.

βœ… Use %, vw, and vh for Responsive Layouts

These units adapt better to different screen sizes.

⚠️ Avoid Overusing px

Fixed pixel values may create responsiveness issues on smaller devices.

  • 🧠 Quick Summary

  • Relative units are flexible and responsive
  • Absolute units are fixed-size measurements
  • rem and % are widely used in modern web design
  • vw and vh are useful for fullscreen layouts
  • px is still common for precise control
CSS Box Model
CSS Color