CSS Academy · Lesson

Absolute Units: px pt cm

Learn when to use fixed absolute units like pixels, points, and centimeters.

Lesson 1 of 413 steps

Absolute Units: px pt cm is a free CSS Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

Absolute vs Relative Units

CSS units fall into two categories: absolute (fixed, real-world measurements) and relative (scale relative to something else). Absolute units are device-independent physical measurements.

px — Pixels

The pixel (px) is the most used absolute unit on screens. On standard displays 1px = 1 device pixel. On high-DPI (Retina) screens CSS pixels map to multiple device pixels, keeping elements the same visual size.

<button class="button">10px 20px padding</button>

pt — Points

A point (pt) is a unit from print design: 1pt = 1/72 of an inch. In CSS, 1pt = 4/3px (approximately 1.33px). Primarily used in print stylesheets for typography.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Physical Units

CSS supports centimeters (cm), millimeters (mm), and inches (in). These make sense in print contexts but are unreliable on screens because screen DPI varies.

<div class="page">A4-width page (21cm), used for print layouts</div>

px on Screens: Practical

For screen-based web design, px is the only practical absolute unit. Even then, using px for font sizes is discouraged because it overrides user browser font-size preferences.

Device Pixel Ratio

Modern displays have a device pixel ratio (DPR) > 1. A 2x Retina screen renders 2 device pixels per CSS pixel. This is why high-DPI images need to be 2x or 3x the display size.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

When to Use px

Use px for:

Border widths (1px is crisp)
Shadows and transforms
Media query breakpoints (though em-based breakpoints are more robust)
Fixed UI elements where exact pixel control is needed

When NOT to Use px for Typography

Setting font-size: 16px on html or body overrides the user's accessibility preference in many browsers. Use rem relative to the browser default instead.

Q — Quarter Millimeter

The q unit is 1/4 of a millimeter. It is used in Japanese print typography for fine typographic control. Rarely used in general web design.

PC — Picas

A pica (pc) equals 12 points or 1/6 of an inch. Like points, picas are print units rarely needed for digital screens.

Absolute Units in Print Stylesheets

Print stylesheets are the primary legitimate use case for absolute units in CSS. Physical units ensure the printed page has accurate dimensions on paper.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Quick Check

Which absolute CSS unit is equivalent to 1/72 of an inch?

Answer it in the interactive lesson

Recap

Absolute units are fixed measurements independent of parent elements. px is the practical screen unit. Physical units (pt, cm, in) are used in print stylesheets. Avoid using px for typography — it overrides user font-size preferences. Use rem instead.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “Absolute Units: px pt cm” lesson free?

Yes — the full text of “Absolute Units: px pt cm” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.

What will I learn in “Absolute Units: px pt cm”?

Learn when to use fixed absolute units like pixels, points, and centimeters. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Absolute Units: px pt cm” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy