CSS has several different units for expressing the length and measurement. CSS units are needed to specify the measurement in stylesheet like padding:”5px”. Mainly there are two types of units in CSS.
- Absolute Length
- Relative Length
Absolute Length: It is not good for use on-screen, cause screen size varies so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known.
Absolute Length Units:
Syntax:
font-size: 0.5cm;
line-height: 0.1cm;
Example: This example illustrates the CSS units by specifying the length unit in cm.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: 1.2cm;
font-weight: bold;
}
.geeks {
font-size: 0.5cm;
line-height: 0.1cm;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
mm: millimeter
Syntax:
font-size: 5mm;
line-height: 1mm;
Example: This example illustrates the CSS units by specifying the length unit in mm.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: 12mm;
font-weight: bold;
}
.geeks {
font-size: 5mm;
line-height: 1mm;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
in: inches
Note: inches (1in = 96px = 2.54cm)
Syntax:
font-size: 0.2in;
1line-height: 0.1in;
Example: This example illustrates the CSS units by specifying the length unit in inches.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: .5in;
font-weight: bold;
}
.geeks {
font-size: .2in;
line-height: .1in;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
px: pixels
Note: pixels (1px = 1/96th of 1in)
Syntax:
font-size: 20px;
line-height: 10px;
Example: This example illustrates the CSS units by specifying the length unit in pixels.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
}
.geeks {
font-size: 17px;
line-height: 5px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
pt: points
Note: points (1pt = 1/72 of 1in)
Syntax:
font-size: 16pt;
line-height: 8pt;
Example: This example illustrates the CSS units by specifying the length unit in points.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: 35pt;
font-weight: bold;
}
.geeks {
font-size: 15pt;
line-height: 5pt;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
pc: picas
Note: picas (1pc = 12 pt)
Syntax:
font-size: 1pc;
line-height: 0.5pc;
Example: This example illustrates the CSS units by specifying the length unit in pc.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS units</title>
<style>
.gfg {
font-size: 3pc;
font-weight: bold;
}
.geeks {
font-size: 1.3pc;
line-height: .2pc;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
Relative Length: It is good for use on-screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.
Relative Length Units:
em: Relative to the font size of that element.
Note: Here 2em means 2 times the size of the current font.
Syntax:
font-size: 10px;
line-height: 2em;
Example: This example illustrates the CSS units by specifying the length unit in em.
HTML
<!DOCTYPE html>
<html>
<head>
<title>relative unit</title>
<style>
p {
font-size: 15px;
line-height: 2em;
}
</style>
</head>
<body>
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
</body>
</html>
|
Output:
ex: Relative to the X(axis)-height of the current font.
Syntax:
font-size: 1ex;
Example: This example illustrates the CSS units by specifying the length unit in ex.
HTML
<!DOCTYPE html>
<html>
<head>
<title>relative unit</title>
<style>
p {
font-size: 40px;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<p>
GeeksforGeeks:<span>A computer science
portal for geeks</span>
</p>
</body>
</html>
|
Output:
ch: Relative to the width of the 0.
Syntax:
font-size: 2ch;
Example: This example illustrates the CSS units by specifying the length unit in ch.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ch unit in CSS</title>
<style>
body {
font-size: 50px;
}
div {
font-size: 1ch;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
<div>
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
rem: Relative to the browser base font-size.
Syntax:
font-size: 3rem;
Example: This example illustrates the CSS units by specifying the length unit in rem.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ch unit in CSS</title>
<style>
body {
font-size: 4rem;
}
div {
font-size: 1.6rem;
}
</style>
</head>
<body>
<p>
GeeksforGeeks
</p>
<div>
A computer science portal for geeks
</div>
</body>
</html>
|
Output:
vw: Relative to 1% of the width of the viewport.
Syntax:
font-size: 10vw;
Example: This example illustrates the CSS units by specifying the length unit in vw.
HTML
<!DOCTYPE html>
<html>
<head>
<title>vw unit</title>
<style>
h1 {
font-size: 4vw;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
A computer science portal for geeks
</p>
</body>
</html>
|
Output:
vh: Relative to 1% of the height of the viewport.
Syntax:
font-size: 10vh;
Example: This example illustrates the CSS units by specifying the length unit in vh.
HTML
<!DOCTYPE html>
<html>
<head>
<title>vw unit</title>
<style>
h1 {
font-size: 4vw;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
A computer science portal for geeks
</p>
</body>
</html>
|
Output:
vmin: Relative to 1% of the viewport’s smaller dimension.
Syntax:
font-size: 10vmin;
Example: This example illustrates the CSS units by specifying the length unit in vmin.
HTML
<!DOCTYPE html>
<html>
<head>
<title>vmin unit</title>
<style>
h1 {
font-size: 8vmin;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
<p>1vmin = 1vw or 1vh whichever is smaller.</p>
</body>
</html>
|
Output:
vmax: Relative to 1% of the viewport’s larger dimension.
Syntax:
font-size: 20vmax;
Example: This example illustrates the CSS units by specifying the length unit in vmax.
HTML
<!DOCTYPE html>
<html>
<head>
<title>vmax unit</title>
<style>
h1 {
font-size: 5vmax;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
<p>1vmax = 1vw or 1vh whichever larger.</p>
</body>
</html>
|
Output:
%: % unit sets the font-size relative to the current font-size.
Syntax:
font-size: 250%;
Example: This example illustrates the CSS units by specifying the length unit in percentage.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS unit</title>
<style>
body {
font-size: 250%;
}
div {
font-size: 17px;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
<div>A computer science portal for geeks</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
21 Jul, 2023
Like Article
Save Article