Learn CSS Units In 8 Minutes

hello everyone in today's video I'm going to be showing you all of the CSS units that you need to know and I'll also be comparing them against each other so you'll finally know the difference between our EMS and EMS percentages and viewlets and so on so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting to you make sure you subscribe to my channel for more videos just like this one and now to get started I first want to look at the differences between pixel units and percentage units because this is probably the easiest thing to understand the difference between essentially a pixel unit is going to be an absolute width which is always going to be the same no matter where it's defined and a percentage is going to be a percentage with that's actually based off of its parent size so if we take an example over here on the right hand side I have this red box which has a width of 50% and this red box with a width of 100 pixels and you can see this 50% box is 50% of the size of the screen while 100 pixel box is 100 pixels wide then if we look down here inside of this black box both of these red boxes are inside this black box so now the 50% is 50% of this black box while the hundred pixels is still 100 pixels wide it hasn't changed but the 50% has actually shrunk down to be only 50% of its parent container and I have all the CSS and HTML over here you can see 50% for the width of 50 percent and 100 pixels is our width of a hundred pixels and it's all defined on our classes for our HTML down here inside of the body and this is pretty easy to understand most people can see the difference between a percentage widths and pixel widths because one of them is absolute and one is relative but something that trips up a few people is another type of relative width which is called the V width and the view height so let's open up the code for that over here on the side and you can see we have 50% still being defined for this box and it still dehaze both the same inside of this black box down here and the same outside in the parent section but we have what's called V width and view height units these V W and V H so a view W unit one view W equals one percent of the entire screen size on the width so one percent of the width of my entire screen is one V W so 100 V W would take up the entire width and fifty V W obviously it would take up half the width but the important thing about V W versus percentages is that viewport units these V W + vh are based on the entire screen size while percentages are relative to their parent so if we look down here in this bottom section you can see this 50 view width unit is expanding outside of its parent because it's always going to be 50% of the entire width of the screen and not based on the parent itself and if we look over here in the CSS you can see we set the width to 50 V W for these red containers that I have 50 V W and this 25 VH we set the view height so the height to 25 view height units and those work exactly the same as the view with units except for view height units one view height unit or view h unit is going to be equal to 1% of the height of the screen so for example 100 view H would be our entire screen height while 25 view H in our case is going to be equal to 25% of the screen height and it doesn't matter what you put it inside of it's always going to be based on the entire screen size and not based on the parent so that's the major difference between V W and V H units and the percentage units percentages are relative to parents while the view W and the view H units those are going to be relative to the entire screen size and don't care about their parents at all now those are some fairly simple units out of the way but we're gonna move on to probably the most confusing set of units and that is the REM versus the e/m to get started both REM units and e/m units are relative but instead of being relative to things around them such as the width of their parents or the height of the parents they're actually relative to the font size that you have defined so an REM stands for route that's what the R stands for so that's relative to our route font size while e/m is not relative to the route it's just relative to its parent so if we look here we have this first section which is all one level deep sea right here we have this HTML all these are children of the root element they're children of our body so REM and e/m are going to behave exactly the same because they have the same root font size and parent font size so as you can see 1r a.m. and 1 p.m. are the same and same thing with two REM and 2 a.m. but now this second section inside this black box they're inside of a parent and that parent has a font size of 30 pixels which is larger than the root font size so we can see that our one REM is still the same as our one our am that's not inside the parent but our one eeehm is actually quite a bit larger than our one a.m. up here and that's because it's essentially 100% of the parents font size while one REM is 100% of the root font size and that'll be the font size defined on HTML for example and that's actually going to be based off of your browser almost always it's going to be 16 pixels or so but you can change that yourself if you really want to but for these purposes you can see that one REM is always going to be the same no matter where it's defined in your application one REM is always the same but one eeehm is going to be different because it's based on the size of its parent font size and our EMS can be a little bit difficult to work with because if you have a lot of EMS nested inside of each other they'll start to grow really really quickly because you may have one that's two e/m inside of another two am inside of another two am so they're all going to be twice as big as the previous one and it's gonna balloon very quickly while our EMS those would all be exactly the same because they aren't based on the parent and we can even see that our two REM is the same as our to REM out here what our 2e m is essentially double the size of our parents font which is 30 pixels so this right here is 60 pixels and down below here I have another example of using REM and e/m but it's actually for sizing these boxes off to the left these red boxes if we come down here I have an icon container which is either our root font size or these large ones at the bottom are going to be the larger font size as you can see down here so the reason we're using e/m versus RM as you can see this box on the left here is 1 cm tall and wide right here you can see one E and width 1 am height so it's the same size as font and our REM is the same size as our root font but when we scale up our font we also want our box to scale up so we keep it at 1 a.m. and it'll scale with our font size we don't have to change the size of our box but down here this one REM the box doesn't change because it's based on the root font size and not the parent font size so this is one case we're using am is actually really useful for sizing things as opposed to just making your font larger or smaller overall for the most part I use REM when defining my font sizes because it makes things easier to work with but for certain cases such as this EMS are really useful so that you have certain things scaling with other certain things such as these red icons for example and now lastly I want to talk about percentages in the case of fonts because you can actually use percentages with fonts and it's going to work exactly the same as a.m. because as we know percentages are based on the parent and Ian is based on the parent so font size of 200% is exactly the same as a font size of 2 e/m same thing with 1 a.m. 100% it's going to be exactly the same so as you can see here all of our REM a.m. and percentages are the same when they're at the root level but when we get inside this parent that has a larger font size the to REM stays exactly the same but our 200% and to e M actually scale with each other they both are 200 percent of the parents font size now there's actually one more relative unit inside of CSS and that's the F our unit which stands for fractional unit but these are only useful inside of Flex container so for example we have flexbox and a grid and that's the only places that you can use these fractional units and I have entire videos on both flexbox and grid so if you want to learn more information about the F our unit make sure to check out either my flex box tutorial or my grid tutorial both of those will go into great depth on that and that's all there is to CSS units if you enjoyed this video make sure to check out my other videos linked over here and subscribe to my channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 208,118

Keywords: webdevsimplified, css units, css units tutorial, em vs rem, em vs rem css, css units explained, css units in 10 minutes, em vs rem in css, em vs rem vs px, viewport units, viewport units css, css vw vh, vw vh, css percentage units, css percentage vs pixels, css 100 percent, css units of measurement, css tutorial, css for beginners, css tutorial for beginners, css units fr, css fr, css relative units, css absolute units, css units compared, css, units, css rem vs em vs px

Id: -GR52czEd-0

Length: 8min 47sec (527 seconds)

Published: Tue Oct 08 2019