CSS Absolute Units
A length given in an absolute unit is fixed: it always displays at exactly that size.
Screen size has no effect on these units, which is why they are not recommended for websites. They can still be useful when the output medium is known, print layout being one case.
Of all of them, px (pixels) is the one used most.
The full set of absolute CSS units:
px— Pixels, the top choice for screens (1px = 1/96th of 1in).cm— Centimeters, mainly for print stylesheets.mm— Millimeters, mainly for print stylesheets.in— Inches, mainly for print stylesheets (1in = 96px = 2.54cm).pt— Points, a unit from typography (1pt = 1/72 of 1in).pc— Picas, a unit from print (1pc = 12pt).
Set Font Size With Px
Sizing text in px (pixels) gives you complete control over how large it appears.
The trade-off is that the page may not scale well across screen sizes, and users cannot change the text size through their browser settings. The zoom tool still works, though, and it resizes the whole page.
Note: The number and the unit must not be separated by a whitespace. With a value of 0, you can leave the unit out.
Example
Font sizes given in px:
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size With Px</title>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
When to Use Absolute Units
Absolute units suit situations such as these:
- The dimensions have to be precise and fixed.
- The design is meant for print media.
- An element must not scale with the viewport.
Tip: Relative units like em or rem give better responsiveness and are worth considering for most web design work.