CSS Units: CSS has several choices for which units to use while deciding the size of different CSS properties. Learning all your choices for CSS units can be key for styling in a way that is not difficult to manage and looks great on any screen.
CSS Units
CSS has a several different units for expressing a length.
Many CSS properties take “length” values, like width, margin, padding, font-size, and so on
Length is a number followed by a length unit, for example, 10px, 2em, and so forth
Example
Set different length values, using px (pixels):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
</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>
Note: A whitespace can’t show up between the number and the unit. Be that as it may, if the value is 0, the unit can be precluded.
For some CSS properties, negative lengths are allowed.
There are two sorts of length units: absolute and relative.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will show up as precisely that size.
Outright length units are not suggested for use on screen, since screen sizes differ so much. In any case, they can be used if the output medium is known, for example, for print layout.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
font-size: 0.5cm;
line-height: 1cm;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
font-size: 5mm;
line-height: 10mm;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
font-size: 0.2in;
line-height: 0.5in;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
font-size: 15px;
line-height: 20px;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
font-size: 15pt;
line-height: 25pt;
}
</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>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
font-size: 1.5pc;
line-height: 3pc;
}
</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>
- Pixels (px) are relative to the viewing gadget. For low-dpi gadgets, 1px is one gadget pixel (dot) of the display. For printers and high resolution screens 1px implies multiple gadget pixels.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
line-height: 2em;
}
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 3ch;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 3ch.</div>
<p>The ch unit sets the font-size relative to the width of the character "0".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 2rem;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 2rem.</div>
<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vw;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vh;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmin;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmax;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 150%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 150%.</div>
<p>The % unit sets the font-size relative to the current font-size.</p>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
