CSS units

There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on.

We cannot apply the whitespace between the number and the unit. The unit can be omitted for the value 0. Some properties of CSS allow the negative values of length.

The length unit in CSS is of two types:

Absolute length.
Relative length.

Absolute lengths

These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size. It is not recommended to use on-screen, because the size of the screen varies too much. So, the absolute units should be used when the medium of output is known, such as the print layout.

Absolute units are useful when the responsiveness is not considered in a project. They are less favorable for the responsive sites because they do not scale when the screen changes.

Generally, absolute lengths are considered to be the same size always. The absolute length units are tabulated as follows:

Unit	Name	Explanation
cm	Centimeters	It is used to define the measurement in centimeters.
mm	Millimeters	It is used to define the measurement in millimeters.
in	Inches	It is used to define the measurement in inches. 1in = 96px = 2.54cm
pt	Points	It is used to define the measurement in points. 1pt = 1/72 of 1 inch.
pc	Picas	It is used to define the measurement in picas. 1pc = 12pt so, there 6 picas is equivalent to 1 inch.
px	Pixels	It is used to define the measurement in pixels. 1px = 1/96th of inch

Example

In this example, we are using the font-size property for the paragraphs for defining the values using the above absolute length units.

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style = "font-size: 20px;" > It has a font-size: 20px; </p>
<p style = "font-size: 1.2cm;" > It has a font-size: 1.2cm; </p>
<p style = "font-size: .7in;" > It has a font-size: .7in; </p>
<p style = "font-size: 18pt;" > It has a font-size: 18pt; </p>
<p style = "font-size: 2pc;" > It has a font-size: 2pc; </p>
<p style = "font-size: 10mm;" > It has a font-size: 10mm; </p>
</body>
</html>

Test it Now

Output

Relative lengths

Relative units are good to style the responsive site because they scale relative to the window size or the parent. They specify the length, which is relative to another length property.

Depending on the device, if the size of the screen varies too much, then the relative length units are the best because they scale better between the different rendering mediums. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.

The relative length units are tabulated as follows:

Unit	Name
em	It is relative to the font-size of the element.
ex	It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'.
ch	It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero).
rem	It is the font-size of the root element
vh	It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.
vw	It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport
vmin	It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension.
vmax	It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension.
%	It is used to define the measurement as a percentage that is relative to another value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
line-height: 0.1cm;
color: blue;
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style = "font-size: 2em;" > It has a font-size: 2em; </p>
<p style = "font-size: 8ex;" > It has a font-size: 8ex; </p>
<p style = "font-size: 6ch;" > It has a font-size: 6ch; </p>
<p style = "font-size: 4rem;" > It has a font-size: 4rem; </p>
<p style = "font-size: 4vw;" > It has a font-size: 4vw; </p>
<p style = "font-size: 10vh;" > It has a font-size: 10vh; </p>
<p style = "font-size: 10vmin;" > It has a font-size: 10vmin; </p>
<p style = "font-size: 8vmax;" > It has a font-size: 8vmax; </p>
<p style = "font-size: 400%;" > It has a font-size: 400%; </p>
</body>
</html>

Test it Now

Output

CSS units: Time

Some animation properties require values to express in time.

Unit	Explanation
s	It is the duration of time in seconds.
ms	It is the duration of time in milliseconds. 1ms = 1/100 of a second

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width: 200px;
height: 200px;
background: red;
border-radius: 50px;
transition-property: background, width, height;
transition-duration: 1s, 2s, 3s;
}

div:hover
{
width:300px;
background: blue;
height:300px;
border-radius: 80px;
}
</style>
</head>
<body>
<center>
<h2>Hover to see effects.</h2>
<div></div>
</center>
</body>
</html>

Test it Now

Output

CSS units: Angles

The transform properties in CSS require values to express in angles

Unit	Explanation
deg	It expresses the angles in degrees.
grad	It expresses the angles in gradians, i.e., 1/400 of a turn.
turn	It expresses the angles in turns, i.e., 360 degrees.

Example

<!DOCTYPE html>
<html>
<head>
<style>

img
  {
  border:9px ridge gray;
  border-radius:30px;
  margin:10px; 
  transition-duration:2s;
    }
  
#img1:hover{ 
transform: rotate(30deg);
transform-origin: bottom left 50px;
}

</style>
</head>

<body>
<center>
  <img src="lion.png" id="img1"/>
  
</center>
  </body>
</html>

Test it Now

Output