CSS Units

In the last lesson you learned about HSL Colors. Now let’s look at something you use in almost every CSS rule. Units.

When you write width: 200px; or font-size: 1.5rem;, that little word after the number is a unit. A unit tells the browser how big a size should be. Let’s see what these units are and when to use each one.

📏 What is a CSS Unit?

A CSS unit is the part that tells the browser the measurement for a size. Think of the number as “how many” and the unit as “of what”.

It is like buying cloth at a shop. You don’t just say “give me 3”. You say 3 metres. The “metres” part is the unit. Without it the number means nothing.

In CSS it works the same way. You write a number, then a unit, and together they set a size. A unit is the small label after the number that tells the browser which kind of measurement you mean.

Here is a simple rule that sets a box width using a unit.

.box {
  width: 300px;
}

The number is 300. The unit is px. So the browser makes the box 300 pixels wide.

🤔 Why do we need different units?

You might ask, why not just use one unit for everything? Here is the real problem.

People open your website on a tiny phone, a tablet, and a big desktop screen. A size that looks nice on one screen can look too big or too small on another. So you need different units for different jobs.

Some sizes should stay fixed. Some should grow when the screen grows. Some should grow when the text grows. Different units give you that control.

We split units into two big groups.

An absolute unit is a fixed size that stays the same no matter what. A relative unit changes its real size based on something else. Let’s look at both.

🧱 Absolute units (fixed sizes)

Absolute units give a fixed size. The most common one by far is px, short for pixel. A pixel is one tiny dot on the screen.

Here we set a button to a fixed height, padding, and text size using pixels.

.button {
  height: 40px;
  padding: 10px;
  font-size: 16px;
}

So this button is always 40 pixels tall. It does not care about the screen size or the text size. It stays the same.

There are other absolute units like cm, mm, in, and pt. You mostly see those when printing on paper. For screens you almost always use px.

🌱 Relative units (sizes that adjust)

A relative unit is a size that grows or shrinks based on something else. This is what makes a website fit nicely on every screen.

The common ones are %, em, rem, vw, and vh. Here is what each one is based on.

The word viewport means the visible area of the screen where your page shows. So 1vw is 1% of the screen width. And 1vh is 1% of the screen height.

Let’s see % in action. This card takes half the width of its parent box.

.card {
  width: 50%;
}

So if the parent box is 600px wide, the card becomes 300px. If the parent grows to 1000px, the card grows to 500px. The card always stays half. That is the nice thing about a relative unit.

Now let’s use viewport units. This banner is always as wide as the full screen and half the screen tall.

.banner {
  width: 100vw;
  height: 50vh;
}

🔤 em and rem for text

em and rem are mostly used for font sizes and spacing. They are based on text size. So when text gets bigger, these grow too.

Say the root font size of the page is 16px. Then 1rem equals 16px. And 2rem equals 32px. So rem always looks at that one root size.

Here we set a heading and a paragraph using rem.

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

So the h1 is 32px and the p is 16px when the root is 16px. Here is the nice part. If a user changes their browser font size to read better, your text grows with it. A fixed px would not do that.

em is similar, but it looks at the current element’s own font size, not the root. We will go deep into the difference in the next lesson. So don’t worry about it too much yet.

⚠️ Common Mistakes

Here are the slips that catch most beginners.

• ❌ Writing a space between the number and the unit, like width: 200 px;. It must be joined as 200px.
• ❌ Forgetting the unit on a size, like width: 200;. Most properties need a unit or they do nothing.
• ❌ Using px for everything and then wondering why the page does not fit small screens.
• ❌ Mixing up vw and vh. Remember w is width and h is height.

There is one special case with the number zero. Only 0 can skip the unit.

✅ Best Practices

A few simple habits will keep your sizes clean and friendly to every screen.

• ✅ Use rem for font sizes so text respects the user’s settings.
• ✅ Use % or vw for widths so layouts stretch on big screens and squeeze on small ones.
• ✅ Keep px for small fixed things like borders, for example border: 1px solid;.
• ✅ Be careful with 100vw on a full page. It can cause a small side scroll because of the scrollbar. Many people use 100% instead for safe full width.

🧩 What You’ve Learned

You now know what units are and how to pick the right one. Quick recap.

• ✅ A unit is the label after a number that tells the browser the size, like px or rem.
• ✅ Absolute units like px are fixed and never change.
• ✅ Relative units like %, em, rem, vw, and vh change based on something else.
• ✅ The viewport is the visible screen area, so vw and vh are based on its width and height.
• ✅ Use rem for text, % or vw for layout widths, and px for small fixed bits.

🚀 What’s Next?

Next we will zoom in on the three units people mix up the most and learn exactly when to use each.

px vs rem vs em