Hello and welcome back.
In this lesson I’m going to be talking about the measurement units in CSS so when it comes to expressing
land in C assess we get various different options of units to select and those units can be broadly
categorized into absolute units and relative units as quite evident with the name itself.
Absolute units are the fixed units that means the values do not change with respect to the screen size
or with respect to the parent element size.
On the other hand the relative units do change with respect to the change in the screen size or change
in the parent element size.
Let us first start with the absolute units and within the absolute units we get.
Couple of options and the first one might be looking quite familiar which is pixels because this is
the one we have been using so far and in fact out of all the options that are available over here within
the absolute units pixels is the most commonly used ones cause this is more suitable for the digital
devices since they are all made up of screens which are composed of pixels on the other hand the other
units have majorly been used for the print media and if you look over these options then many of them
are also quite familiar like centimetre inch and one thing to keep in mind is that wherever we can use
pixels we can use these other units as well and the order that you see over here is basically the ascending
order which means that pixels is the smallest unit whereas points are slightly bigger followed by MM
pictures centimetre an inch.
So let’s try these different values in our as document and see the difference for our self.
So I go back to the document now we already have specified some font size which is right now 30 pixels
and this B is the elements elective which is for all the B elements let’s make it a big specific.
So I go back to the estimate document and then here let’s take for example this paragraph element which
is a child of a parent element def and let’s try these different values and see if any changes made
to the parent element are actually impacting it or not.
So this paragraph will really have the idea of peace 0 1.
So let’s go back to the document and let’s make it hash p 0 1 for the D.
Now this has become an idea selector and all these changes are going to be applied only to this paragraph.
But the idea of peace is 0 one and I’ll save it and then reload.
We now have all the changes applied only to this paragraph.
So a value of three pixels is applied only to this paragraph.
Now if I change this pixels to let’s say points which is slightly bigger in and the pixels.
Then if I refresh the page then you can see that the size has now increased.
But the difference is not that big.
However if I change it to let’s say Mm.
Now I save it.
And then if I reload then the difference has become quite big.
And likewise if I change it to let’s say.
Inch which is the largest of all.
And if I refresh now and you can see that the sizes increase too much to be even read in the browser
it’s too big.
We are able to see only the portion of it.
If I change this value to let’s say only one inch and then if I refresh then we can see it now.
So you can see that this unit is so big that even a number of fun is giving it such a big size.
So as I said that these are not dependent upon the parent element.
If we go back to the HTML document and sure the parent element for this paragraph is the div element
with the class of first If so let me copy this class name and then I go back to the document and then
let’s add the property and let me add the DOT for the class name selector and here let me add the font
size of let’s say 50 pixels and I’ll say it again and then if I refresh nothing’s gonna change.
It’s always going to remain one inch in size even though if we have 50 pixels in length.
In fact if I make it let’s say five inch and then see it again.
Again nothing’s gonna change because this one is not related to its parent element font size at all.
But this is not the case with the other option which is relative.
So in the relative units we get various different options and change with respect to the parent element
size or the screen size.
So let’s start with dispersal H.
So if we go back to the document and let us first remove the font size from here that’s commented out
and then if I make this 1 percent this 1 percent is basically 1 percent of the font size of the parent
element.
Now if you see over here in the document nowhere have we specified the font size the the parent element
of this paragraph first if this div element doesn’t have any font size specified nor does the header
or the HTML tag up to this point we haven’t really specified any font size.
So in that a case is gonna go with the default one.
So the default size as we know already is 16 pixels.
This 1 percent is gonna be 1 percent of 16 pixels which is point sixteen pixels.
So if I save it and then reload and you can see over here that the paragraph has become too small because
it’s only 1 percent of 16 pixels if I make it hundred percent and this time it’s gonna be hundred percent
of sixteen pixels which become 16 pixels.
So if I reload then you can see that this time the size is equal in two other paragraphs which also
have 16 pixels or font size likewise if I change it to let’s say two hundred and see it again it has
now become 32 pixels cause 200 percent of sixteen pixels is 32 pixels.
Now again if we look back in the HTML document then the parent element of this paragraph is the stiff
element.
So within the stylus sheet if I just uncommon this div and then now this font size of five inch is gonna
impact the font size of this paragraph which is the child element because in this case where we are
using percentage as the unit it’s gonna be dependent upon the parent element.
So if I did fresh now you can see that phone sizes again increased because two hundred percent of five
inch is basically 10 inch.
So it’s quite big.
If I change it to let’s say one inch and then save it and then refresh.
Now the sizes become two inch 200 percent of one inch is two inch.
Now one thing to keep in mind is that the ratio says work says that it first looks at its parent element.
If the parent element does not have any phone size specified then it goes to the next parent element
in the hierarchy and if it doesn’t see any phone size either then it goes again to the higher hierarchy
which is body and then goes all the way up to the H to email to show you.
Let me first remove the font size from here from this div.
Let me read it.
Use the header as the selector.
So I go back to the style sheet and if I change it by the header and then see it again.
Then this heading is also increase because this heading if we see over here a spiral the header and
since we haven’t really specified any font size for this one.
So it’s gonna take the font size which is specified within the header but I would like to draw your
attention for now.
To this paragraph where the size remains the same as earlier cos here now even if we haven’t really
specified any font size for this div it’s gonna follow the font size of the parent element and likewise
if we do not specify any font size for this one what we do for this one and in that case it’s gonna
be the percentage of this font size.
So we do not specify even up to this level any font size property.
And it’s gonna go with the default size which is 16 pixels.
And if we have specified that any of this level the font size property then it’s gonna be whatever percentage
we have specified of that particular font size.
The same goes for the image as well.
So if I scroll down then here we have to image and divert over here.
If we set of it to let’s say 100 percent then this word is gonna be 100 percent of the vote of the parent
element in the parent element of this image is.
Again this div element and by default elements on each the email do have a vote of hundred percent.
Here in this case it’s gonna be 100 percent off 100 percent vote.
So it’s going to take up the entire bit of the screen.
So if I go back to the assess and save it and then when I refresh and you can see that this image has
now stretched all the way to divert the parent element which is the div element.
Now another thing to keep in mind is that since the default size of all the elements is 100 percent.
So when we increase the screen size and the weight also increases and if we reduce the screen size then
the word also reduces.
And you can see that this image is actually responding to the weight of the screen.
However this is not actually in accordance with the screen size that this image is changing.
It’s rather changing in accordance with the size of the parent element.
So let me show you how if we go back to the document then this stuff is a parent element and let me
change the vat of this div again.
Let’s go to the C assess and
and let me set the it to 50 percent.
If I say it now and then I reload.
Now you can see that the mid size has reduced to 50 percent cause this time even though the image size
is still 100 percent cause this time it’s hundred percent off its parent element which is 50 percent
invert and 100 percent or 50 percent becomes 50 percent.
So if I make it 25 percent and I’ll be fresh again and this time it’s 100 percent of the 25 percent
weight which is 25 percent of the screen size.
Now if I increase the screen size it’s going to increase.
Also the parent element which is the diff element is going to remain 25 percent of the screen size and
this work is going to be a hundred percent of the diff which is 25 percent
in the same way.
If I just uncommon this one and rather said the word property over here and sell it to let’s say 400
pixels then this time it’s gonna be hundred percent off to 400 pixels.
And if I refresh and you can see over here that the size has now become 400 pixels.
Right.
And if I now increase or decrease the size then it’s not changing with respect to the screen size change
because again it’s dependent directly upon the parent element.
And here we have specified an absolute unit so that’s why this relative unit is relatively changing.
But this absolute unit does not change.
That’s why even if we reduce or increase the screen size it’s always going to be a hundred percent or
400 pixels after percentage.
We also have m and ram the M unit is relative to the font size of the parent element and the RAM unit
is relative to the font size of the root element.
So let’s take a look and let me change it back to pixels for a better understanding.
I save it and let’s make it 20 pixels and change the font size to let’s say to e m this E M basically
multiplies forever value over here with the font size of the parent element.
So this to here means two times 20 pixels which is 40 pixels but if I make it let’s say one point five
m and then save it and then reload there you can see that the size has now reduced because it’s now
one point five times 20 pixels which is 30 pixels.
Again it’s not actually the direct parent it’s the parent of the parent element which is this div element.
So if I uncommon this diff element and then I set the font size of
size of let’s say 25 pixels and then I save it and then if I reload then this time it’s going to multiplied
this value of one point five with twenty five pixels which has now increased.
So when we already have the font size mentioned for the direct parent then it’s gonna be dependent upon
the direct parent.
However if we don’t have it specified for the direct parent that is gonna go to the next parent element
in the hierarchy
and if it doesn’t find that and we know already that the default size if I remove the header portion
off from here and then if I keep it one point five m then this time it’s going to be one point five
times 16 pixels which is the default size.
So if I save it and then I’ll reload and you can see it is reduced even further.
Now we can use this M for other properties as well like for this word as well.
So if I make it let’s say and release them and then save it and then refresh and you can see that the
word has now increased.
Now one thing to keep in mind and we are using M with other properties that they are actually dependent
upon the phone size of that particular element so here for example in this image when we haven’t really
specified any phone size it’s gonna be taking 16 pixels as the font size of which becomes sixteen hundred
pixels.
If I said the font size to let’s say 1 pixels and then save it.
And then if I reload and you can see that this time it’s actually multiplying the hundred with one.
So it actually becomes a hundred pixels.
That’s the reason why it shrinks 200 pixels.
So this is kind of weird and that’s why we majorly use ESM or AMS for font size whereas the other option
that we get which is the RAM unit it’s not really dependent upon the parent element.
It’s actually dependent upon the root element and if the root element does not have any font size specified
then it’s going to take the default size of 16 pixels.
So if I make it ram for example and then if I set the header value again and let’s set it for example
to 100 pixels and then I save it and then if I reload and come back to the paragraph and you can see
that this time it remains the same cause it’s not dependent upon this one.
However if I said this font size for the HD UML which is the root element and then if I refresh then
this time you can see that it has now increased because this RAM unit is dependent upon the root element
and that’s why it’s more consistent because it’s not solely dependent directly upon the parent element.
It’s dependent upon the root element.
And if we do not have anything specified for the root element then it’s going to go with the default
size of 16 pixels and in the same way if we change it if we make the word as let’s say 100 RAM and then
save it and then if we reload then again it’s gonna be dependent upon the root element which is two
hundred pixels so using the ram with other properties is also quite easy as compared to the M unit which
is dependent upon the font size of that element.
So that’s why using the RAM unit for other properties is more consistent as compared to the M units
after the M and RAM.
We also get EW and VH which stands for Newport Red and we have bought height and these two units are
dependent upon the screen size while the EW which is the view port that is relative to the screen with
the which is view port height is relative to the screen height one we EW or one view port word is basically
100 of the screen width whereas 100 EW is a hundred percent of the screen red which is the entire advert
here.
If I set the vote to let’s say hundred EW then this time this is going to be dependent upon the vote
of the screen and it’s gonna be a hundred percent so reload and this time you can see that
the image is now again the full size can see a hundred EW.
And likewise if I said the height to let’s say 100 v edge and then save it and then if I reload then
it’s gonna be the size of the screen and you can see over here that it’s actually taking up the size
of the screen.
So this is how the EW work and these are more dependent upon the parent elements so for example
for this HTML if I said the vet let’s say only 50 percent and then save and refresh then again if
I come down then or the vote is not impacted it is still 100 percent even though the weight of this
was 50 percent it’s going to be 100 percent.
And likewise if I said to hide also to let’s say 50 percent and then I reload then again this height
is not changing because this view port height is basically dependent upon the view port which is the screen
size.
So the screen height is the reach view port height and the screen word is the view port with VW.
So you can use this unit when you don’t want your properties to be dependent upon the parent size but
rather on the screen size.
And if I reduce the screen size then you can see that this image is actually shrinking invert.
And likewise if I reduce the height then the height of the image is also reducing.
So it’s completely responding to the screen size because it goes in accordance with that.
It’s relative to that instead
and lastly we have the women and we max relative units and women is basically relative to the screen
smaller dimension.
So if we said we men then whichever is smaller be it very tall height it’s going to be in accordance
with that and in the same way Re-max is relative to the largest dimension be it vector height.
So in this document if I changed this VW to women and then if I save it then this time it’s gonna take
100 percent of the minimum screen size.
So if I refresh
and you can see that this time if I choose the height for example and you can see that this weight is
now reducing even though I am reducing the height the vote is reducing because this weight is basically
the minimum of the screen dimension so you can see that that in this case the height smaller so it’s
taking the small height
and likewise if I said it to let’s say re Max and save it and then if I reload and you can see this
time that it’s taking the larger dimension.
If I produced the height for example then it’s gonna take the weight and if I increase the height and
reduce the weight then also it’s gonna take the height which is larger than the weight and that’s why
it goes up to here
so women basically takes the the smaller dimension which could either be weight or height and V Max
takes the larger side which could be vector height.
So these are the different options we get.
These are the absolute units and relative units and if you want your websites to be more responsive
to the screen so to the parent element size then you can rather start using the relative units whereas
if you want the size to remain fixed then you can go with the absolute units.
