Measuring Units In CSS

Measuring Units In CSS

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.

Measuring Units In CSS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *