CSS Units

Let me ask you something.

You have been using px throughout this entire course. And it has worked fine. But have you ever noticed that on some websites text looks perfectly sized on a big screen but tiny on a phone? Or a section that fills the screen beautifully on one device looks completely broken on another?

A lot of that comes down to units. Picking the right unit for the right situation is one of those things that separates layouts that work everywhere from layouts that only work on your screen.

There are quite a few units in CSS but honestly you only need to know five well. Let us go through each one properly.

px — Pixels

You already know this one. px gives you a fixed size that never changes regardless of the screen or the user's settings.

The heading is always exactly 48px. The paragraph is always exactly 16px. On a small screen or a large screen. On any device. Always the same.

When to use px — borders, shadows, spacing where you need exact pixel precision. Things like border: 2px solid white or box-shadow: 0 4px 12px are always in px because you want them exact.

When not to use px — font sizes and layout widths. Fixed pixel fonts do not scale with user preferences which hurts accessibility. Fixed pixel widths break on different screen sizes.

% — Percentage

Percentage is relative to the parent element. If the parent is 800px wide and you set width: 50% the element becomes 400px. If the parent changes size the element changes with it.

The hero takes up exactly half the container. If you change the container width the hero adjusts automatically.

When to use % — widths of containers, columns, and images that should scale relative to their parent. The classic max-width: 100% on images uses percentage to make sure images never overflow their container.

rem — Root Em

rem is relative to the root font size of the document — the font size set on the html element. By default browsers set this to 16px. So 1rem equals 16px. 2rem equals 32px. 0.5rem equals 8px.

Here is what is happening.

3rem — 3 multiplied by the root font size of 16px equals 48px.

1rem — 1 multiplied by 16px equals 16px.

0.875rem — 0.875 multiplied by 16px equals 14px.

The big advantage of rem over px is accessibility. If a user has set their browser to display larger text because they have difficulty reading small fonts the root font size increases. Everything in rem scales up with it. Everything in px stays fixed and potentially becomes unreadable.

em — Element Em

em is similar to rem but instead of being relative to the root it is relative to the font size of the current element or its parent.

Here is what is happening.

font-size: 20px on .movie-section — this sets the base for all em calculations inside.

padding: 2em — 2 times 20px equals 40px of padding.

font-size: 1.5em on h2 — 1.5 times the parent font size of 20px equals 30px.

font-size: 0.9em on p — 0.9 times 20px equals 18px.

em is useful when you want everything inside a component to scale together relative to one base size. Change the parent font size and everything inside scales proportionally.

The tricky part is that em compounds. If you have nested elements each with em font sizes they multiply together and can get unpredictable. This is why most developers prefer rem for font sizes — it is always relative to the same root value and never compounds.

vw and vh — Viewport Units

vw is viewport width. vh is viewport height. The viewport is the visible area of the browser window.

1vw equals 1 percent of the viewport width.

1vh equals 1 percent of the viewport height.

100vw equals the full viewport width.

100vh equals the full viewport height.

The hero fills the entire screen. The heading size is 5 percent of the viewport width so it scales as the browser window gets wider or narrower.

Here is what is happening.

width: 100vw — the hero is exactly as wide as the browser window.

min-height: 100vh — the hero is at least as tall as the browser window.

font-size: 5vw — the heading is 5 percent of the viewport width. On a 1200px wide screen that is 60px. On a 800px screen it is 40px. The text scales with the window automatically.

When to use vw and vh — full screen hero sections, elements that should always fill the visible screen, and fluid typography that scales with the window size.

Choosing the Right Unit

Here is a practical guide for when to reach for each unit.

Font sizes — use rem. Scales with user preferences and never compounds.

Borders and shadows — use px. You want exact pixel precision here.

Padding and margin — use rem for consistency. px is fine for small fixed values like 2px or 4px.

Component widths — use % so they fill their container responsively.

Full screen sections — use vh and vw.

Max widths for content containers — use px. You want a fixed maximum like max-width: 1200px.

Building the Netflix Clone

Let us audit our Netflix clone and make sure we are using the right units everywhere. Font sizes move to rem. The hero uses vh. Borders and shadows stay in px.

Here is what changed and why.

html font-size: 16px — sets the root explicitly so rem calculations are predictable everywhere.

padding: 1rem 2.5rem instead of padding: 16px 40px — the same values but now they scale if the root font size ever changes.

gap: 1.25rem instead of gap: 20px — consistent with the spacing system.

min-height: 100vh on hero — the hero always fills the full viewport height on any screen size.

Borders stay in px — border: 2px solid white stays in px because border thickness should always be exactly 2px regardless of font size or screen size.

Box shadows stay in px — shadow values are precise visual effects that should not scale with font size.