CSS Academy · Lesson

Absolute Units: px pt cm

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

Absolute Units: px pt cm is a free CSS Academy lesson on CoddyKit — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 {
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

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.

@media print {
  body {
    font-size: 12pt;
  }
}

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.

@media print {
  .page {
    width: 21cm; /* A4 width */
    margin: 2cm;
  }
}

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 {
  width: 100px; /* CSS pixels */
}
/* On Retina: 200 real pixels are used */

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.

@media print {
  body { font-size: 11pt; }
  .page-break { page-break-after: always; }
}

Quick Check

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

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.

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, and the CSS Academy course includes 4 lessons in total. 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.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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