CSS Units

What are CSS Units?

CSS units define the size of elements, spacing, and layout.

They are essential for creating responsive and flexible designs.

Types of Units

• Absolute units (fixed size)
• Relative units (responsive)

Absolute Units

Absolute units have fixed values and do not scale with screen size.

Relative Units

Relative units scale based on screen size or parent elements.

• %
• em
• rem
• vw
• vh

Percentage (%)

Percentage values are relative to the parent element.

em

The em unit is relative to the font-size of the parent element.

rem

The rem unit is relative to the root (html) font-size.

Viewport Units (vw & vh)

Viewport units are based on the size of the screen.

px vs rem

px is fixed, while rem scales with the root font size.

Full Example

Why Units are Important

• Control layout and sizing
• Enable responsive design
• Improve accessibility

Common Mistakes

• Using only px everywhere
• Confusing em and rem
• Ignoring responsive units

Practice

Create a layout using px, %, rem, and vw units.

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic