CSS Units

Introduction

In the previous lesson, you learned how CSS colors control the visual appearance of text, backgrounds, borders, and other parts of a webpage.

Now you will learn how CSS controls size and measurement.

Every webpage contains measurements.

Text has a size, boxes have width and height, elements have spacing, borders have thickness, and layouts respond to different screen sizes.

CSS units tell the browser how large or small a value should be.

What are CSS Units?

CSS units are measurement values used to define the size, distance, spacing, position, and dimensions of elements.

.box {
    width: 300px;
    height: 150px;
    margin: 20px;
    padding: 1rem;
}

In these declarations, px and rem are CSS units.

300px

300 → Numeric Value
px  → Unit

Together → CSS Measurement

<div class="box">
    CSS Units
</div>

.box {
    width: 300px;
    height: 100px;
    font-size: 24px;
}

Why Do We Need Units?

The browser needs to know how measurements should be calculated.

Different units allow developers to create fixed sizes, flexible sizes, scalable typography, and responsive layouts.

.fixed-box {
    width: 300px;
}

.flexible-box {
    width: 80%;
}

.scalable-text {
    font-size: 2rem;
}

.screen-section {
    height: 100vh;
}

Real-World Analogy

Imagine measuring objects in the real world.

You may use centimeters for a notebook, meters for a room, and percentages when describing how much space is occupied.

Fixed Measurement
      │
      ▼
     px

Part of Available Space
      │
      ▼
      %

Relative to Text Size
      │
      ├── em
      └── rem

Relative to Screen
      │
      ├── vw
      └── vh

CSS Value Structure

Many CSS measurements contain a number followed immediately by a unit.

width: 500px;

font-size: 2rem;

padding: 5%;

height: 100vh;

500px
│   │
│   └── Unit
│
└── Number

Types of CSS Units

CSS units can be divided into two major categories: absolute units and relative units.

CSS Units
   │
   ├── Absolute Units
   │      ├── px
   │      ├── cm
   │      ├── mm
   │      ├── in
   │      ├── pt
   │      └── pc
   │
   └── Relative Units
          ├── %
          ├── em
          ├── rem
          ├── vw
          ├── vh
          ├── vmin
          ├── vmax
          └── ch

Absolute vs Relative Units

Absolute units use a fixed reference, while relative units calculate their size from another value.

.box {
    width: 300px;
}

.box {
    width: 50%;
}

1. Pixels (px)

The pixel unit is one of the most commonly used CSS units.

It is written using px.

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border-width: 2px;
}

<div class="box">
    300px Wide Box
</div>

.box {
    width: 300px;
    height: 100px;
    background-color: #6c5ce7;
    color: white;
}

2. Percentage (%)

Percentage values define a measurement relative to another size.

.child {
    width: 50%;
}

If the parent is 600px wide, a child with width: 50% becomes 300px wide.

Parent Width = 600px

Child Width = 50%

600 × 50%
= 600 × 0.5
= 300px

<div class="parent">
    <div class="child">
        50% Width
    </div>
</div>

.parent {
    width: 100%;
}

.child {
    width: 50%;
}

Percentage Reference

A percentage value does not always use the same reference.

Its reference depends on the CSS property where the percentage is used.

.child {
    width: 50%;
    font-size: 120%;
}

.move {
    transform: translateX(50%);
}

3. em Unit

The em unit is a relative unit connected to font size.

For the font-size property, em is calculated relative to the font size of the parent element.

.parent {
    font-size: 20px;
}

.child {
    font-size: 2em;
}

The child font size becomes 40px because 2em means two times the parent font size.

Parent Font Size = 20px

Child Font Size = 2em

20px × 2
= 40px

<div class="parent">
    Parent Text

    <div class="child">
        Child Text
    </div>
</div>

How em is Calculated

The exact reference used by em depends on the property.

For font-size, em uses the inherited font size. For many other properties, em uses the calculated font size of the element itself.

.button {
    font-size: 20px;
    padding: 0.5em 1em;
}

Because the button font size is 20px, 0.5em becomes 10px and 1em becomes 20px.

font-size = 20px

Vertical Padding:
0.5em × 20px = 10px

Horizontal Padding:
1em × 20px = 20px

The em Compounding Problem

Nested elements using em for font-size can multiply relative sizes repeatedly.

<div class="level-one">
    Level One

    <div class="level-two">
        Level Two

        <div class="level-three">
            Level Three
        </div>
    </div>
</div>

.level-one,
.level-two,
.level-three {
    font-size: 1.5em;
}

If the starting font size is 16px, each nested level becomes larger than the previous level.

4. rem Unit

The rem unit means root em.

It is calculated relative to the font size of the root html element.

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

Because the root font size is 16px, 2rem becomes 32px.

Root Font Size = 16px

Heading Size = 2rem

16px × 2
= 32px

<h1>2rem Heading</h1>

<p>1rem Paragraph</p>

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

How rem is Calculated

Every rem value refers back to the root font size rather than the immediate parent font size.

html {
    font-size: 16px;
}

.small {
    font-size: 0.75rem;
}

.normal {
    font-size: 1rem;
}

.large {
    font-size: 1.5rem;
}

.title {
    font-size: 2rem;
}

html {
    font-size: 16px;
}

.parent {
    font-size: 30px;
}

.child {
    font-size: 2rem;
}

The child becomes 32px, not 60px, because rem uses the root font size rather than the parent font size.

em vs rem

.parent {
    font-size: 20px;
}

.child {
    font-size: 2em;
}

/* Result: 40px */

html {
    font-size: 16px;
}

.parent {
    font-size: 20px;
}

.child {
    font-size: 2rem;
}

/* Result: 32px */

5. Viewport Width (vw)

The vw unit is relative to the width of the viewport.

One vw represents one percent of the viewport width.

1vw   = 1% of Viewport Width

50vw  = 50% of Viewport Width

100vw = 100% of Viewport Width

.box {
    width: 50vw;
}

If the viewport is 1200px wide, 50vw becomes 600px.

Viewport Width = 1200px

50vw = 50% of 1200px

1200 × 0.5
= 600px

6. Viewport Height (vh)

The vh unit is relative to the height of the viewport.

One vh represents one percent of the viewport height.

1vh   = 1% of Viewport Height

50vh  = 50% of Viewport Height

100vh = 100% of Viewport Height

.hero {
    min-height: 100vh;
}

<section class="hero">
    Full Screen Hero Section
</section>

vw and vh Calculation

Viewport units are calculated directly from the browser viewport dimensions.

Viewport Width  = 1200px
Viewport Height = 800px

1vw = 12px
1vh = 8px

7. vmin Unit

The vmin unit uses the smaller viewport dimension.

Viewport:
Width  = 1200px
Height = 800px

Smaller Dimension = 800px

1vmin = 1% of 800px
      = 8px

.shape {
    width: 30vmin;
    height: 30vmin;
}

8. vmax Unit

The vmax unit uses the larger viewport dimension.

Viewport:
Width  = 1200px
Height = 800px

Larger Dimension = 1200px

1vmax = 1% of 1200px
      = 12px

.background-shape {
    width: 50vmax;
    height: 50vmax;
}

9. ch Unit

The ch unit is based on the width of the zero character in the current font.

It is especially useful for controlling readable text line lengths.

.article {
    max-width: 65ch;
}

<p class="article">
    Long paragraphs are easier to read when
    the line length is controlled.
</p>

10. Unitless Values

Some CSS properties accept numbers without any unit.

.text {
    line-height: 1.6;
}

.item {
    flex-grow: 1;
}

.layer {
    z-index: 10;
}

.transparent {
    opacity: 0.5;
}

<p class="text">
    This paragraph uses a unitless line-height.
</p>

.text {
    font-size: 20px;
    line-height: 1.6;
}

A unitless line-height of 1.6 means the line height is calculated as 1.6 times the element font size.

Font Size = 20px

Line Height = 1.6

20px × 1.6
= 32px

Common CSS Units

.page {
    width: 90%;
    max-width: 1200px;
    min-height: 100vh;
    padding: 2rem;
}

.article {
    max-width: 65ch;
}

.title {
    font-size: 3rem;
}

.button {
    padding: 0.75em 1.5em;
    border: 2px solid;
}

Choosing the Right Unit

Choosing a unit depends on what the measurement should respond to.

Complete Responsive Example

The following example combines several CSS units in one responsive component.

<section class="hero">
    <div class="hero-content">
        <span class="badge">
            CSS Course
        </span>

        <h1>
            Learn Modern CSS
        </h1>

        <p>
            Build responsive and scalable
            websites step by step.
        </p>

        <button>
            Start Learning
        </button>
    </div>
</section>

.hero {
    min-height: 80vh;
    width: 100%;
    padding: 3rem 5%;
}

.hero-content {
    width: 90%;
    max-width: 65ch;
}

.badge {
    font-size: 0.875rem;
    padding: 0.5em 1em;
}

h1 {
    font-size: 3rem;
}

p {
    font-size: 1.125rem;
    line-height: 1.7;
}

button {
    font-size: 1rem;
    padding: 0.75em 1.5em;
    border: 2px solid;
}

Browser Calculation Flow

The browser must convert CSS measurements into final values before drawing elements.

CSS Value
   │
   ▼
Read Number
   │
   ▼
Read Unit
   │
   ├── px   → Use Pixel Reference
   ├── %    → Find Property Reference
   ├── em   → Find Font Size Reference
   ├── rem  → Find Root Font Size
   ├── vw   → Read Viewport Width
   └── vh   → Read Viewport Height
   │
   ▼
Calculate Final Value
   │
   ▼
Create Layout
   │
   ▼
Display Output

Real-World Applications

CSS units are used in every part of modern website development.

Advantages

CSS units provide multiple ways to create precise, flexible, scalable, and responsive designs.

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

CSS units tell the browser how measurements such as width, height, spacing, typography, and positioning should be calculated.

Absolute units use a generally fixed measurement reference, while relative units calculate their values from another reference.

Pixels are commonly used for precise measurements such as borders, icons, and controlled dimensions.

Percentages create flexible values based on a reference determined by the CSS property.

The em unit is connected to font size and can be useful for component-relative scaling.

Nested em font sizes can compound because each level may use the calculated size of its parent.

The rem unit uses the root font size and provides a consistent reference for typography and spacing.

Viewport units such as vw and vh create measurements based on the width and height of the browser viewport.

The vmin and vmax units use the smaller and larger viewport dimensions.

The ch unit is useful for controlling readable text widths.

Some CSS properties accept unitless values, including opacity, z-index, flex-grow, and unitless line-height.

Professional CSS commonly combines multiple units because each unit is designed for a different relationship.

The best unit depends on what the measurement should follow: a fixed reference, a container, a font size, the root font size, or the viewport.

In the next lesson, you will learn CSS backgrounds and understand how to use background colors, images, repeat behavior, positioning, sizing, attachment, and shorthand properties.