🎯 Learning Objectives

By the end of this lesson, students will understand:

• All major CSS units
• Absolute vs relative units
• Font-based, parent-based, and viewport-based units
• How max-width and max-height work with responsive design

1️⃣ CSS Units

CSS units are used to define the size of elements (width, height, padding, font-size, etc.).

They are divided into two types:

✔ Absolute Units (fixed, do not scale)

✔ Relative Units (scale based on font-size, parent, or viewport)

2️⃣ Absolute Units

1️⃣ px (Pixels)

• Represents a single screen pixel
• Most common fixed-size unit
• Not responsive

.box {
  width: 200px;
  height: 150px;
}