Learn CSS Units In 8 Minutes

hello everyone in today's video I'mgoing to be showing you all of the CSSunits that you need to know and I'llalso be comparing them against eachother so you'll finally know thedifference between our EMS and EMSpercentages and viewlets and so on solet's get started now welcome back toweb dev simplified my name is Kyle andmy job is to simplify the web for you soyou can start building your dreamproject sooner so if that soundsinteresting to you make sure yousubscribe to my channel for more videosjust like this one and now to getstarted I first want to look at thedifferences between pixel units andpercentage units because this isprobably the easiest thing to understandthe difference between essentially apixel unit is going to be an absolutewidth which is always going to be thesame no matter where it's defined and apercentage is going to be a percentagewith that's actually based off of itsparent size so if we take an exampleover here on the right hand side I havethis red box which has a width of 50%and this red box with a width of 100pixels and you can see this 50% box is50% of the size of the screen while 100pixel box is 100 pixels wide then if welook down here inside of this black boxboth of these red boxes are inside thisblack box so now the 50% is 50% of thisblack box while the hundred pixels isstill 100 pixels wide it hasn't changedbut the 50% has actually shrunk down tobe only 50% of its parent container andI have all the CSS and HTML over hereyou can see 50% for the width of 50percent and 100 pixels is our width of ahundred pixels and it's all defined onour classes for our HTML down hereinside of the body and this is prettyeasy to understand most people can seethe difference between a percentagewidths and pixel widths because one ofthem is absolute and one is relative butsomething that trips up a few people isanother type of relative width which iscalled the V width and the view heightso let's open up the code for that overhere on the side and you can see we have50% still being defined for this box andit still dehaze both the same inside ofthis black box down here and the sameoutside in the parent section but wehave what's called V width and viewheight units these V W and V H so a viewW unitone view W equals one percent of theentire screen size on the width so onepercent of the width of my entire screenis one V W so 100 V W would take up theentire width and fifty V W obviously itwould take up half the width but theimportant thing about V W versuspercentages is that viewport units theseV W + vh are based on the entire screensize while percentages are relative totheir parent so if we look down here inthis bottom section you can see this 50view width unit is expanding outside ofits parent because it's always going tobe 50% of the entire width of the screenand not based on the parent itself andif we look over here in the CSS you cansee we set the width to 50 V W for thesered containers that I have 50 V W andthis 25 VH we set the view height so theheight to 25 view height units and thosework exactly the same as the view withunits except for view height units oneview height unit or view h unit is goingto be equal to 1% of the height of thescreen so for example 100 view H wouldbe our entire screen height while 25view H in our case is going to be equalto 25% of the screen height and itdoesn't matter what you put it inside ofit's always going to be based on theentire screen size and not based on theparent so that's the major differencebetween V W and V H units and thepercentage units percentages arerelative to parents while the view W andthe view H units those are going to berelative to the entire screen size anddon't care about their parents at allnow those are some fairly simple unitsout of the way but we're gonna move onto probably the most confusing set ofunits and that is the REM versus the e/mto get startedboth REM units and e/m units arerelative but instead of being relativeto things around them such as the widthof their parents or the height of theparents they're actually relative to thefont size that you have defined so anREM stands for route that's what the Rstands for so that's relative to ourroute font size while e/m is notrelative to the route it's just relativeto its parent so if we look here we havethis first section which is all onelevel deep sea right here we have thisHTML allthese are children of the root elementthey're children of our body so REM ande/m are going to behave exactly the samebecause they have the same root fontsize and parent font size so as you cansee 1r a.m. and 1 p.m. are the same andsame thing with two REM and 2 a.m. butnow this second section inside thisblack box they're inside of a parent andthat parent has a font size of 30 pixelswhich is larger than the root font sizeso we can see that our one REM is stillthe same as our one our am that's notinside the parent but our one eeehm isactually quite a bit larger than our onea.m. up here and that's because it'sessentially 100% of the parents fontsize while one REM is 100% of the rootfont size and that'll be the font sizedefined on HTML for example and that'sactually going to be based off of yourbrowser almost always it's going to be16 pixels or so but you can change thatyourself if you really want to but forthese purposes you can see that one REMis always going to be the same no matterwhere it's defined in your applicationone REM is always the same but oneeeehm is going to be different becauseit's based on the size of its parentfont size and our EMS can be a littlebit difficult to work with because ifyou have a lot of EMS nested inside ofeach other they'll start to grow reallyreally quickly because you may have onethat's two e/m inside of another two aminside of another two am so they're allgoing to be twice as big as the previousone and it's gonna balloon very quicklywhile our EMS those would all be exactlythe same because they aren't based onthe parent and we can even see that ourtwo REM is the same as our to REM outhere what our 2e m is essentially doublethe size of our parents font which is 30pixels so this right here is 60 pixelsand down below here I have anotherexample of using REM and e/m but it'sactually for sizing these boxes off tothe left these red boxes if we come downhere I have an icon container which iseither our root font size or these largeones at the bottom are going to be thelarger font size as you can see downhere so the reason we're using e/mversus RM as you can see this box on theleft here is 1 cm tall and wide righthere you can see one E and width 1 amheight so it's the same size asfont and our REM is the same size as ourroot font but when we scale up our fontwe also want our box to scale up so wekeep it at 1 a.m. and it'll scale withour font size we don't have to changethe size of our box but down here thisone REM the box doesn't change becauseit's based on the root font size and notthe parent font size so this is one casewe're using am is actually really usefulfor sizing things as opposed to justmaking your font larger or smalleroverall for the most part I use REM whendefining my font sizes because it makesthings easier to work with but forcertain cases such as this EMS arereally useful so that you have certainthings scaling with other certain thingssuch as these red icons for example andnow lastly I want to talk aboutpercentages in the case of fonts becauseyou can actually use percentages withfonts and it's going to work exactly thesame as a.m. because as we knowpercentages are based on the parent andIan is based on the parent so font sizeof 200% is exactly the same as a fontsize of 2 e/m same thing with 1 a.m.100% it's going to be exactly the sameso as you can see here all of our REMa.m. and percentages are the same whenthey're at the root level but when weget inside this parent that has a largerfont size the to REM stays exactly thesamebut our 200% and to e M actually scalewith each otherthey both are 200 percent of the parentsfont size now there's actually one morerelative unit inside of CSS and that'sthe F our unit which stands forfractional unit but these are onlyuseful inside of Flex container so forexample we have flexbox and a grid andthat's the only places that you can usethese fractional units and I have entirevideos on both flexbox and grid so ifyou want to learn more information aboutthe F our unit make sure to check outeither my flex box tutorial or my gridtutorial both of those will go intogreat depth on that and that's all thereis to CSS units if you enjoyed thisvideo make sure to check out my othervideos linked over here and subscribe tomy channel for more videos just likethis one thank you very much forwatching and have a good day