Tutorials CSS Units & Sizing

Introduction to CSS

What is CSS? CSS Selectors

Colors & Backgrounds

CSS Colors Backgrounds

Text & Fonts

Text Styling Web Fonts

Box Model

The Box Model Display & Positioning

Layout

Flexbox CSS Grid

Responsive Design

Media Queries Units & Sizing

Animations & Effects

Transitions & Transforms CSS Animations

Advanced CSS

Pseudo-classes & Pseudo-elements CSS Variables & Best Practices

CSS Beginner FREE

Units & Sizing

Lesson 2 of 16 Beginner Interactive

CSS provides many units for sizing elements. Choosing the right unit is key to creating flexible, responsive layouts.

Fixed Units

px — pixels, fixed size (not relative to anything)

Relative Units

em — relative to the parent element's font size
rem — relative to the root (html) element's font size
% — relative to the parent element
vw — viewport width (1vw = 1% of viewport width)
vh — viewport height (1vh = 1% of viewport height)

Max/Min Sizing

min-width / max-width — clamp element width
min-height / max-height — clamp element height

Tip: Use rem for font sizes and % or vw/vh for layout dimensions. Avoid using px for anything except borders and small fixed sizes.

Syntax

CSS

/* Font Sizes */
body { font-size: 16px; }
h1 { font-size: 2.5rem; }    /* 40px */
p { font-size: 1rem; }       /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* Width */
.container { width: 80%; max-width: 1200px; }
.full-width { width: 100vw; }
.half-width { width: 50%; }

/* Height */
.hero { height: 100vh; }
.sidebar { min-height: 100vh; }

/* Responsive */
.text { font-size: clamp(14px, 2vw, 18px); }

CSS Units Overview

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Units Overview</title>
    <style>
        html { font-size: 16px; }
        .box {
            width: 50%;            /* % relative to parent */
            height: 120px;         /* px fixed */
            padding: 1.5em;        /* em relative to font-size */
            margin: 2rem auto;     /* rem relative to root font-size */
            background: #fef3c7;
            box-sizing: border-box;
        }
        .px { font-size: 20px; }
        .vw { font-size: 3vw; }
        .container {
            width: min(90%, 600px);
            height: min(50vh, 300px);
            margin: 0 auto;
            background: #e0e7ff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="box">width 50%, padding 1.5em, margin 2rem</div>
    <p class="px">This text is 20px.</p>
    <p class="vw">This text is 3vw (viewport width).</p>
    <div class="container">width: min(90%, 600px)</div>
</body>
</html>

Try It Yourself

Practice

Exercise

Set a hero section that takes exactly 100vh height and centers content.

Answer

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Exercise

Create a container that is 80% wide but never exceeds 1200px.

Answer

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

Quick Quiz

What is the difference between em and rem?

No difference

em is relative to parent, rem is relative to root

rem is relative to parent, em is relative to root

Both are relative to viewport

em inherits from the parent element's font size; rem is always relative to the root html element's font size.

What does 1vw represent?

1 pixel

1% of viewport width

1% of viewport height

1% of parent width

1vw equals 1% of the viewport width.

Interview Questions

rem units are relative to the root font size, making it easy to scale the entire site by changing one value. px is fixed and doesn't respect user font-size preferences, which hurts accessibility. rem also makes consistent spacing easier since all sizes reference the same base.

clamp(min, preferred, max) sets a value that stays between a minimum and maximum, with a preferred value in between. For example, font-size: clamp(14px, 2vw, 18px) creates responsive text that scales with viewport but stays between 14px and 18px. It replaces many media queries for simple responsive adjustments.

Media Queries

Tutorial Complete

Back to CSS