You are currently viewing Css Units Explanation

Css Units Explanation

  • Post author:
  • Post category:CSS
  • Post comments:0 Comments

Every CSS attribute that includes dimensions or length, such as margin, padding, height, width, font-size etc, requires a unit. Numerous units are provided by CSS, some of which have fixed values and are referred to as absolute units, while others have relative values, such as those of the parent element or the default value for that specific HTML element, and are referred to as relative units.

Centimeter, millimetre, pixel, and other units are examples of absolute measurements in CSS. While %, em, vh, rem, etc. are some of the relative CSS units.

CSS Unit

We use kilometres when describing the separation between two locations, such as your Delhi and Mumbai. In comparison, when discussing a building’s height, we typically use feet. Additionally, you might frequently use comparable phrases, such as saying that your new phone is twice as thick as your previous one.

For expressing the dimensions of several properties of an HTML element, such as margin, padding, length, and width, we have units in CSS that are very similar to real-world units. For example, we can set the margin of an HTML element to a specific value.

h1{
padding : 10px;
}

10 is the numeric value and px (pixel) is a CSS unit in the code above. The CSS Unit we’ll be using the most frequently is this one. Using CSS units like %, em, or rem will allow us to make our items responsive.

CSS units can be divided into two major categories absolute units and relative units.

Absolute Units

The length specified using absolute units will appear to be exactly that size because these are the fixed-length units. On-screen use is not advised due to the wide variations in screen size.

As a result, when the output medium is known, such as the print layout, the absolute units should be used.

Absolute units are helpful in projects where responsiveness is not taken into consideration. They don’t scale as the screen changes, which makes them less advantageous for responsive sites.Absolute lengths are typically thought of as always being the same size.

cm : centimeter, used to define the units in centimeter.

mm : millimetre, used to define the units in millimetre.

in : inche, used to define the units in inche(1 in = 96px = 2.54cm).

pt : points, used to define the units in points (1pt = 1/72 of 1 inch).

pc : picas, used to define the units in picas(1pc = 12pt).

px : pixels, used to define the units in pixels(1px = 1/96th of inch).

Example :

<!DOCTYPE html>
<html>
<head>  
<style>    
body {      
background-color: #ccc;      
text-align: center;    
}  
</style>
</head>
<body>  
<h1> Absolute units </h1>  
<p style="font-size: 10px;"> It has a font-size: 10px; </p>  
<p style="font-size: 2.2cm;"> It has a font-size: 2.2cm; </p>  <p style="font-size: 1.1in;"> It has a font-size: 1.1in; </p>  <p style="font-size: 12pt;"> It has a font-size: 12pt; </p>  
<p style="font-size: 1pc;"> It has a font-size: 1pc; </p>  
<p style="font-size: 20px;"> It has a font-size: 20px; </p></body>
</html>
Css Units Explanation

Relative Units

Because they scale according to the window size or the parent, relative units are useful for designing responsive websites. They provide a length specification that is related to another length attribute.

The relative length units are the best since they scale better across the various rendering mediums, depending on the device and if the size of the screen varies too much. The responsive units can be set to default to the relative units. We can avoid updating styles for various screen widths thanks to it.

em : The default size of the property is 1em. In this case, 1em is equal to 100%.

ex : 1ex would be equal to the distance from the letter’s base to the intersection point in relation to the height of the letter “a.”

ch : This unit is sized in proportion to the width of the parenthetical digit “0.” This is only accurate for plain text 1ch=8px if the parent element’s font-size remains at its default 16px.

rem : rem is an acronym for Root em.In other words, the browser won’t take into account any changes made to the parent elements and will instead scale the HTML element to which the attribute is applied according to the root or default value for that specific element.

vh : The term here denotes view height. Use 100vh to indicate that your element should be exactly the same height as your viewport or view window.

vw : View Width is referred to as vw. 100% of the viewport or view window’s width is referred to as 100vw.

vmin : 100vmin denotes that the element modifications are proportional to 100% of the view port’s smaller dimension, i.e., 100% of the view port’s minimum view height and view width.

vmax : A change in an element is said to be 100vmax if it relates to 100% of the view port’s bigger dimension, that is, 100% of the maximum view height and view width.

% : This is a unit of percentage. The element’s measurement is proportional to the parent’s size.

Example :

<!DOCTYPE html>
<html>
<head>  
<style>    
body {      
background-color: #ccc;      
text-align: center;   
 }  
</style>
</head>
<body>  
<h1> Relative units </h1>  
<p style="font-size: 1.7em;"> It has a font-size: 1.7em; </p>  <p style="font-size: 7.2ex;"> It has a font-size: 7.2ex; </p>  <p style="font-size: 1.1in;"> It has a font-size: 1.1in; </p>  <p style="font-size: 10ch;"> It has a font-size: 10ch; </p>  
<p style="font-size: 5rem;"> It has a font-size: 5rem; </p>  
<p style="font-size: 5vmin;"> It has a font-size: 5vmin; </p></body>
</html>
Css Units Explanation

Conclusion

Since HTML elements scale with regard to the size of the viewing window when set to relative units, the size of the elements will automatically adjust to fit the size of the screen and become responsive, relative units are favoured over absolute units for creating responsive websites.

I hope after reading this blog post you have cleared all the doubts about CSS units. If you have any questions or suggestions, then don’t forget to comment below!

Thanks for reading!

Written by : Vipin

Leave a Reply