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.