Hi Folks, In this article we are going to learn about UNITS IN CSS, Like in real world we have different types of measuring units to measure different items e.g. we measure liquid in liter, rice in kg etc. Similarly In CSS, we have different units to measure length, different units acts differently on properties.

In CSS, we have many properties which takes length as a value, First understand what is property and value, I give background-color: blue; to a container , here background-color is a property and blue is it's value. So properties like margin , padding, font-size, height, width, etc. Takes length as a value. Length is a number which has some unit e.g. 10px, 10em, 10rem etc.

Types of Units in CSS

Absolute Units
Relative Units

1. Absolute Units

Absolute units are the fixed units, it means any property which has given absolute unit, will appear as its sizes and will not change on changing screen size.

Absolute units are:- PX(Pixel), mm(millimeter), cm(centimeter) , etc. we don't use cm and mm in CSS.

h1{
   font-size: 10px;
   }

As we know we use web pages on different screen like in mobile , laptop , TV etc. Every screen has different size and If I given font-size: 10px then it will appear same on every screen i.e. 10px. After learning about relative units you'll realize why we should avoid using Absolute units.

2. Relative Units

Relative units are those which are dependent or relative to different entities. Which eventually changes themselves on changing viewport width , height etc.

Types of Relative Units

em
rem
Percentage(%)
vw
vh

1 . EM

em unit is relative to parent's font-size. For example I made a container 1 <div> which has font size of 20px and made a container 2 <div> inside a container 1.

 <div class="container1">
        <div class="container2">

        </div>
    </div>

If I Provide container2 a margin of 2em then it will take margin with respect to parent's font size i.e. container1 font-size.

.container2{
        margin : 2em;
 }

/* Container1 font size 20px*/
/*em is relative to parent's font-size */
   1em = 20px
   2em = 2*20px = 40px
   3em = 60px

Means container2 will take margin of 40px, As If we vary the font-size of container1 then margin of container2 will also vary.

We can give any property to container2 in em, like padding, font-size, height and width each will be relative to it's parents font-size.

2 . REM

rem unit is relative to root font size means HTML's font size. By default, browsers set the font size of 16px to our HTML document. If I give container2 margin of 2rem then it will change with respect to root base value i.e. 16px.

.container2{
        margin : 2em;
 }

/* Root base Value 16px */
 1rem = 16px
 2rem = 32px
 3rem = 48px

Note:- we can change the value of our HTML document

html{
   font-size : 20px;
}

/* Now root base value is 20px */
   1rem = 20px
   2rem = 40px
   3rem = 60px

3 . Percentage (%)

It is also an relative unit which changes itself with respect to parent.

If container1 width is 1000px and I declare container2 width of 50% then it will take 50% of container1's width i.e. 500px, similarly container1's height is 500px and I declare container2 height is 50% then it will take 250px height which is relative to its parent's height.

 .container1{
            width: 1000px;
            height: 500px;
        }

 .container2{
            width: 50%;
            height: 50%;
        }

4 . VW (Viewport Width)

It is relative unit which changes itself with respect to viewport's width. If I declare container1 width is 50vw then it will take 50% of viewport width. We can even declare height in vw and it will change with respect to viewport width.

.container1{
            width: 50vw;
            height: 70vw;
        }

5 . VH (Viewport Height)

It is unit which is relative to viewport height. It is similar to vw, like 50vh is 50% of viewport height.

.container1{
            width: 90vh;
            height: 50vh;
        }

Summary

As we have learnt about different units. So, to make a mobile friendly responsive design we must use relative units.

Now the question which unit we should use.

For height and width we should use % , vw and vh
For font-size we should use em and rem

As we change the screen size then our font-size, height and width of the elements adjusts automatically because of relative units which creates a beautifully render design on all screens. It is obvious that we have to use media queries to make our design responsive but because of relative units we don't need to write much code.

Note:-

As I believe, to be a good developer we should more focus on practicality, not on theory. so go and get your hands dirty on it, try all the code by yourself.

Thank you so much for reading it completely, If you liked it do like, comment, share and follow for more content. Comment for any feedback.

Bharat Singh's Blog