CSS Units
CSS Units
In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the user set for content or element. The CSS unit is required to depict any measurement like margin: 30px; where the pixel or px is a unit of CSS. These units are applied to set the lengths, padding, margin, and many others.
Let’s understand some key points.
- We can’t apply the whitespace among the unit and the number.
- A unit may be neglected for 0.
- A few CSS properties permit the length’s negative values.
The CSS units can be of two types:
- Relative length
- Absolute length
Relative lengths
This type of length is suitable to design any responsive site for the reason it scales relative to a parent or any size of the window. It describes the length, i.e., relative to other length properties.
If the screen size varies a lot, then the units of relative length are better because these units scale among the distinct rendering mediums (depending over the device). We can apply any relative units similarly, like a default for a responsive unit. The relative length provides help to ignore update designs for distinct screen sizes.
A few relative lengths are discussed and explained in the following table:
| Unit | Name |
| em | This unit is relative to an element’s font-size. |
| ex | These units are relative to the component’s font’s x-height. It is used rarely. Any x-height can be examined by the lowercase letter ‘x’ height. |
| ch | This unit is quite similar to the ex unit, but rather than using the ‘x’ letter’s height, it measures an integer “0” (zero) width. |
| rem | It is considered as the font size of the root element. |
| vh | These units corresponds to the viewport’s height. 1vh= 1% or 1/100 of the height of viewport. |
| vw | These units are relative to the viewport’s width. 1vh= 1% or 1/100 of the width of viewport. |
| vmin | These units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport. |
| vmax | These units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport’s. |
| % | This unit is applied to represent a measurement like a percentage, i.e., relative to other values. |
Consider the below examples:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
p
{
line-height: 0.1cm;
color: navy;
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style = "font-size: 2em;" > It has the font-size: 2em; </p>
<p style = "font-size: 8ex;" > It has the font-size: 8ex; </p>
<p style = "font-size: 6ch;" > It has the font-size: 6ch; </p>
<p style = "font-size: 4rem;" > It has the font-size: 4rem; </p>
<p style = "font-size: 4vw;" > It has the font-size: 4vw; </p>
<p style = "font-size: 10vh;" > It has the font-size: 10vh; </p>
<p style = "font-size: 10vmin;" > It has the font-size: 10vmin; </p>
<p style = "font-size: 8vmax;" > It has the font-size: 8vmax; </p>
<p style = "font-size: 400%;" > It has the font-size: 400%; </p>
</body>
</html>
Output:
Example: Time
A few animations attribute need values to show in time.
| Unit | Description |
| s | This value is the time duration in seconds. |
| ms | This value Is the time duration in milliseconds. 1ms= 1/100 of any second |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 200px;
height: 200px;
background: lime;
border-radius: 50px;
transition-property: background, width, height;
transition-duration: 1s, 2s, 3s;
}
div:hover
{
width:300px;
background: orange;
height:300px;
border-radius: 80px;
}
</style>
</head>
<body>
<center>
<h2> Hover to examine the effects. </h2>
<div></div>
</center>
</body>
</html>
Output:
Example: Angles
The transformation attributes of CSS need values to show in angles.
| Units | Description |
| deg | It shows the angles inside the degrees. |
| grad | It shows the angles inside the gradians, which is 1/400 of any turn. |
| turn | It shows the angles inside the turns, which is 360 degrees. |
<!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="Lion1.png" id="img1"/>
</center>
</body>
</html>
Output:
Absolute lengths
The absolute length is the units of fixed-length type. The length, i.e., is displayed with the use of the absolute units can be represented absolutely of that size. As the screen size varies a lot, thus it is not suggested to use the on-screen. So, any absolute unit must be applied if the output’s medium is known, like the print layout.
These units will be helpful if the responsiveness will not be considered inside a project. It is not more favorable for some responsive sites due to it does not scale if any screen changes.
The absolute length will be considered to be of the same size all the time, generally. The units of absolute length are discussed below:
| Units | Name | Description |
| cm | Centimeters | This unit applied to depict the measurements within the centimeters. |
| mm | Millimeters | This unit asked to illustrate the measurements within the millimeters. |
| in | Inches | This unit referred to represent the measurements within the inches. 1in= 96px= 2.54cm |
| pt | Points | This unit applied to depict the measurements within the points. 1pt = 1/72 of 1 inch |
| pc | Picas | This unit referred to represent the measurements within the picas. 1pc = 12pt so, there 6 picas will equal to 1 inch. |
| px | Pixels | This unit applied to depict the measurements within the pixels. 1px = 1/96th of inch |
Example:
In the following illustration, we will apply the CSS property font-size for some paragraphs to represent the values with the use of the units as above-mentioned of absolute length.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style = "font-size: 20px;" > It has the font-size: 20px; </p>
<p style = "font-size: 1.2cm;" > It has the font-size: 1.2cm; </p>
<p style = "font-size: .7in;" > It has the font-size: .7in; </p>
<p style = "font-size: 18pt;" > It has the font-size: 18pt; </p>
<p style = "font-size: 2pc;" > It has the font-size: 2pc; </p>
<p style = "font-size: 10mm;" > It has the font-size: 10mm; </p>
</body>
</html>
Output:
