CSS Units & Sizes Tutorial for Beginners

Overview

Learn about common CSS units of measurement in this beginner-friendly tutorial. Explore absolute units like pixels and relative units such as percentages, rem, and em. Understand when to use each unit type, discover the ch unit, and delve into viewport units (vw and vh). Gain insights on default browser styles, CSS resets, and practical applications of different units. Master the art of setting sizes in web pages with this comprehensive guide to CSS units and sizes.

Syllabus

Intro
Welcome
Setup
Many CSS units to choose from
Absolute units - pixels
Where NOT to use an absolute value
Where you can use an absolute value
Relative units - percent
rem units
rem vs em units
When to use em units
ch units
Default browser styles
CSS Reset
Viewport units - vw and vh
When vw units can cause a problem
A good use case for vh units