The CSS Units You Should Use: em, rem, % , vh, vw, and more - Colt's Code Camp

hey everyone its colt hope you're all doing well today we're talking about the plethora of CSS units we've got pixels and REMS and m's and VHS VW's Freeman v-max percentages millimeters inches centimeters points cues whatever those are and a whole bunch of others in this video I want to spend time talking about the most important modern CSS units and when you should use them and when you should avoid them this video is part of a series I'm doing for beginners to learn how to code please consider subscribing if you're not already I'm getting mightily close to hundred thousand subscribers I really appreciate it let's get the show on the road here we go units within the world of CSS units there are two main camps two groups there are relative units like M's and REMS or routes M's to BHS VW's percentages all of which we use to define some length or size relative to another value versus absolute units like pixels and centimeters inches millimeters there's even quarter millimeters which are not as commonly used definitely and that group of absolute units are always fixed in size in relation to one another so I'm gonna focus more on relative units those are the more useful ones in my opinion the more modern more commonly seen but we're gonna start with absolute units just for a moment's by far the most common out of these absolute units are px or pixels but as you saw in the previous slide there are many other absolute units this is the CSS specification the standard the document that outlines how CSS is supposed to work there's a section on absolute lengths we've got centimeters millimeters cues which are quarter millimeters inches pikas points and pixels now it's important to understand if we take pixels as our first example that a single pixel one px is not necessarily actually one pixel on your screen in the past that's how it was supposed to work when there were more standardized displays and resolutions were pretty poor but nowadays we've got high resolution displays you've got Retina displays where the the single space that used to be one pixel is now two or more pixels so that is not how pixels the unit actually works if you're curious how these are actually defined how these absolute units are set but there actual size is the spec mentions that the dimensions are anchored either by relating the physical unit to their physical measurement or by relating the pixel unit to the reference pixel so these other measurements these units like millimeters centimeters inches those are apparently often used in print I don't have enough experience there to say if that's actually true but allegedly that's what they're used for so if you're using a high-resolution laser printer or something it's the job of the printer or some software to make sure that one inch the unit I N equals one physical inch on the printed page but in browsers that's obviously a big issue with different screen resolutions so one pixel unit is supposed to be set to something called a reference pixel this is going way down a rabbit hole that really doesn't matter but if you're curious a reference pixel is supposed to be the visual angle of one pixel on a device with a pixel density of 96 dots per inch and a distance from the reader of an arm's-length okay so all this tells us is that a pixel in modern browsers is not necessarily a single actual pixel on the display but these units are all absolute so whatever that pixel is an inch is going to have exactly 96 pixels in it and then from there you can see all the conversions here all of these units can be derived from the size of that pixel that I set based off of that weird reference pixel size anyway over here I've got a quick little demo we see pixels a lot I don't really recommend using them for font size we'll talk about why there are better units but just as a quick demo right if we have an h1 or select all h1 and to make the font size 80 pixels and then somewhere else on this page I also reference 80 pixels it should be exactly the same size let's make all h3 s have a font size of 80 pixels as well and those are the same font size it doesn't matter where they are on the page what they're nested inside of these are absolute units so if I instead did 96 pixels which is supposed to be the exact same as one inch and if I change that we shouldn't notice any difference there it looks exactly the same font size 96 pixels versus 1 inch anyway that's it pixels millimeters I've never ever seen those before these are all absolute units and generally these aren't as commonly used in today's world instead we spend a lot more time with this side of the chart I guess the relative units so there are quite a few here we're going to start off with percentages so percentages are what they sound like they are a relative unit where we can define some size or a length that is a percentage of some other value what's mildly confusing is what that other value is it depends on the particular property that we're trying to set so most commonly I use percentages at times with width if I'm trying to set a width of something let's say I have two images like I have here and I want both of these images to be side-by-side taking up 50% of the parent container space so whatever that container is they're in a section with the ID of gallery so I could select that section gallery and give it a hard-coded with how about 800 pixels maybe maybe a thousand pixels and then I can use a percentage to set the width to be 50% for each image which is 50% of the width of the parent so let's just select all images here and all set with to be 50% those are the only two images on the page and there you go you can see that they are side-by-side if I add a border to my gallery it'll be a little bit easier order how about three pixels solid red okay so that is my gallery there they are each taking up 50% if I added one more image in we're going to have a problem of course just duplicate that second image each one now takes up 50% of the width of this parent container why don't we do something like 33 0.3 33 33 33 and see what we end up with there we go a third a third and a third so percentages in that context reference the parent element whatever that parent element is if I had my images not in the gallery but instead just in the body you'll see that they take up 33% or 33 point three three thirty 33% of the parent container which is the body now for sentences work a little bit different with other properties so for something like line height if you set line height to be fifty percent we are not saying fifty percent of the line height of the parent we're saying fifty percent of the font size of the element itself so the way that percentages work does vary I mean every single time it's just a percentage of some other value but what that other value is can definitely vary and it's best to look at the particular property you're trying to set and read the documentation okay so what I'm going to do is take this h1 here and give it a background color just for a moment so we can see the line height a bit better background color will be lavender lavender with an e and I'm gonna change the line height to be 50% of 96 which is what is half of 96 45 plus 348 yes so if I change this to be 48 pixels it shouldn't look any different and it doesn't it's exactly the same so in this case line height this % 100% is 100% of the font size of this element itself so that's percentages next up we're going to move on to another relative unit the M and generally this is pronounced M the name M doesn't really mean anything in CSS it allegedly comes from a type of graphical term back in the day it's supposed to equal the width of the lowercase letter M I'm pretty sure it might be uppercase but anyway it doesn't actually stand for anything M is another relative unit and it's also one that is going to change how it behaves based off of the property that we're setting so with font size which is where M s are used a lot 1 M is going to equal the font size of the parent so this is a relative unit if I set something to have a font size of 2m s it will be twice the font size of the parent or 3 M's or 1.5 m/s 0.5 a single M is the font size of the parent so I'll show a quick demo of this I've got this section right here let me scroll down here we've got an H to look at my stuff H 3 stuff stuff I'm gonna get rid of some of this cluttering and I'm gonna select that stuff is my section and I'll give it a font size just the entire section of how about 20 pixels okay so now that I have that one font size set on this whole section I can take h2s as an example and set font size to be 3 MS which is going to be 60 pixels three times the parent elements font size so here's our h2 three times that 20 pixels is 60 pixels if I just went with 60 pixels it's exactly the same font size okay so there's one example now let's do the h3 down below I could set that to have a font size of 2 ms and that should be 40 pixels up let's verify it looks exactly the same so these are another relative unit right and I'm taking that parent font size whatever it is and then tripling it or doubling it or having it let's take the paragraphs in here and say that all paragraphs should have a font size of 0.5 m/s and that's pretty small that is now 10 pixels so I could do something like maybe 0.8 m/s or I could just go with 1m but that is a bit large so I'm probably just going to go with 0.8 or something like that so you can use m/s for other properties not just font size but with those other properties one M is equal to the computed font size of the element itself so to demonstrate this I'll work with this h2 that I have right here and on this h2 I'm going to add a border so that we can just see a little bit clearer the width or the height rather of this element let's go with a 4 pixel solid I don't know let's mix it up let's do a dashed orange red so we can get a rough visualization of the height of this element which right now is not set explicitly it's just based off of the content in there but if I set the height to be following it to match my font size three EMS what I'm actually doing is making it way larger because in this case with any other property that is not font size one M is equal to the computed font size of the element itself so what is the computed font size of this element well right here font size is three MS and its parent element is a section that has a font size of 20 pixels so we're taking 20 pixels times 3 which is 60 pixels then I'm saying I want three times that to be the height what is 60 times three hundred and eighty pixels so if I set this to be a hundred and eighty pixels nothing changes to help me illustrate something else around M's I have a new code pen here it's very simple it's just a nested unordered list so I've got some allies and then some ul nested allies different things I'm hoping to find in the grocery store or some garden work different tubers and bulbs there's just some nested content so I've got my section here and there's an h1 and an li let's say that I want the h1 to have a font size of maybe two EMS maybe even three and then I decide alright if that's gonna be the h1 I want my allies to be a little bit larger but not three M's maybe 1.5 m/s or something so if I try that font size 1.5 m okay it's not terrible here it's a bit large though and then a little bit larger and larger as you can see things scale very quickly at least when I have a number that is greater than one now if I wanted to shrink that down a bit and I would decided you know what I want 0.5 m/s we're going to have the opposite problem things shrink down very very quickly and if for some reason I decided I wanted to give my UL some self size as well let's say that this is 1.5 m/s and you ELLs have a font size of two M's oh dear this gets large extremely quickly a holy moly ax is a huge M literally hem anyway what is happening of course is that I have nest content and I'm saying all allies if we just go back to this let's do two M's it's a little easier to work with or to do the math on so we've got two M's for every Ally so this is going to be twice the font size of whatever font size is inherited for this Ally from its parent and then same thing here but then we get to this Li and all of a sudden its font size which was this thing's font size is now being doubled and then we get here we're doubling again and then we get to here and it's another Li so take that inherited font size and multiply it by two so this can be obnoxious in certain situations or a lot of the time I should say sometimes it's nice to be able to set a font size relative to the parent or the inherited font size but a lot of the time what I prefer and what most people prefer over ms is root em so we're our EMS RMS I usually just say REMS anyway REMS our root ms so they are a relative unit however they behave differently from regular old ms because with REMS everything is relative to the font size of the root HTML element and this is often way easier to work with just as an example if your roots HTML element had a font size of 20 pixels 1 R M is always 20 pixels it doesn't matter where in the document you are it doesn't matter if you're nested in a bunch of allies like we have it doesn't change it's always some multiple or some value relative to the root elements font size so I could use REMS here if I know that I want my h1 and allies to have a 2 to 3 ratio or 3 to 2 ratio in terms of font size or maybe to make the math easier let's do a 4 to 2 so I want my h1 to be twice as large as my allies if I use REMS I can still achieve that but I won't have to worry about this crazy nested insanity now every Ally is always twice the size of whatever the root elements font size is and in most browsers the root element the HTML elements font size defaults to 16 pixels so REMS are nice because we can still have these relative font sizes where I don't have to use pixel values I can say this is 4 times the root element font size this is 2 times I could say that you know if we have some h2 in here this h2 is going to just say to-do-list do this today coal's I can select that h2 and say that it's font size is going to be 3 REMS so 3 times the root elements font size or I can go smaller 0.5 REMS and just to show you the default is usually 16 so if I change this to be 8 pixels it shouldn't change in size and it doesn't it's identical at least with a default HTML element font size usually you're not going to go and directly change this but if I did and I say that the HTML font size is actually 30 pixels everything is going to scale at least everything that uses REMS if I had something that was using pixels it would not change so if I make this smaller and I go to 10 pixels everything shrinks down so now this h1 is 40 pixels 4 times 10 this is what 5 pixels is it half that yes half of 10 so that's really the basic idea of REMS they are going to allow you to define relative font sizes and it's not just font size you can use REMS for things like margin if you wanted to or padding but I find it most useful for font sizes because it does allow us to make responsive websites easier if a user in their browser decides that they want a larger default font size they want 20 pixels or 24 pixels as their font size for the HTML element in chrome and different browsers you can change that setting all of our text is going to scale appropriately if for some reason I decide that I want everything to shrink down on my webpage or I wanted to scale up it's as simple as changing the HTML elements font size so I personally prefer REMS and most people do but there are times for M's non routes M just regular old M's can be nice I'll show you an example very quickly I've got a simple button here it's not very attractive and I'd like for it to have some rounded corners so I'm going to set the border radius to be how about 0.5 REMS and there you go you can see it has those rounded edges I don't want it to be a circle or anything I just want some curved corners there and they'll add a little bit of padding padding will be 0.2 REMS maybe space it out a bit and maybe a little bit more 0.3 sure alright so that looks okay enough at least at that font size but if I wanted this button to be able to scale in different situations for example if I take this button and I put it in my h1 right there but I realized I actually want this button to grow to the same font size as its parent so if it's in an h1 I want it to look larger than just this tiny little button but if it's in a smaller Li or just on its own like it is here I want it to be smaller so maybe I won't use REMS maybe I'll use MS so that it does scale I'll just set it to be one Ram so font size or 1m rather and it now should just be the same font size as its parents so that works but then we have the problem that our curved edges and the padding is not scaling because no matter what the font size is in our button we're setting it to have 0.5 Ram border radius and 0.3 REM padding that is not going to scale if the button itself scales so this is a situation where we might want m/s so we'll still get those rounded corners this is not a hard-coded number of pixels not that 0.5 Rams is hard-coded either this will change the actual value will change depending on that root elements font size but nothing is going to change based off of the buttons font size itself but if I just remove that are for padding and for border radius now I have this button that has padding that is dynamic or is going to change based off of the font size of the button so whether we have a very large button or a small button will have the same level of rounded corners the same roundedness relative to the font size so it's not that ms are useless and you should avoid them not at all it's just that I generally prefer using REMS until there's a situation where I know I want something to scale or to change sizes relative to other properties on that element or relative to the parent in the case of font size next up we have two more units VW's and V h's they stand for view technically it's a viewport height and viewport width and these are units that are relative to the width of the viewport or the height of the viewport which is basically the dimensions of the browser window the available space for that route HTML elements so in code pen at least in my little rendered view down here this all the white stuff you can see is the viewport for this document it's kind of confusing because that's embedded right this is an actual document to everything you see in this browser window is the initial containing block for the actual code pen page so if I shrink this down let's focus on the white here that's the viewport for the code pen that I'm typing into and as I change that and make it wider or skinnier or taller or shorter the number of pixels available you can see actually code been pointed out the the size of the viewport changes so V H and V W units are relative to those dimensions so they go from 1 to 100 100 V W is 100% the width of the viewport 100 VH is a hundred percent of the height 1 V H would be 1% of the height and so on so let me illustrate an example of when this can be very useful so if I have a section here and I want to give this section a background that is a gradient so I'll set background image or just the shorthand background to be a linear gradient let's go to write from I don't know if this is probably not gonna be pretty but from magenta to cyan that's currently the size of the section but if I want this section I want that gradient to be the full height of the screen I guess I could give it a height of just a number of pixels that I figure out something like I'm just making this up at 500 pixels and that kind of works I guess it's covering most of the screen if I get rid of the margin and padding and everything I'm just gonna do that with a star selector here okay so now we have this effect where it's 500 pixels tall this big gradient but it's hard-coded at 500 pixels so if my screen shrinks down I now have a lot of extra space here and maybe the effect I want is a full height backdrop like I have here where there's different sections so it may be another full height here and then another full height if that makes sense these are all the same color but I might want different Asians that take up the entire height of the screen that you can see at any points and then another section and another section with what I'm doing here I'm hard coding that in it just doesn't work very well but if I use 100 VH I'm telling this section to have a height of 100 percent of the viewport height so whatever that viewport height is so I can't scroll through this right now there's no scrollbar there's nothing else to see this is it it's the entire gradient it's actually easier to see if I change this to a gradient from top to bottom we can see cyan all the way down there so now if I scale this down and make this skinnier like that we still see the entire gradient magenta all the way down to cyan if I make it a lot bigger or if I fullscreen dit magenta to cyan if I look at it in full ish pageview same thing magenta all the way to cyan so I could use this to add another section in my first section well both of them are 100% of the view height so whatever that view height is we see that first gradient now I scroll down and here's the second gradient same thing 100% of the current view height so if I just scale that way down there's my first one here's my second one make this a lot larger it takes up the entire screen that I can see and same thing down here okay so that's VH if I change that of course to be 50 VH they will split that height whatever is available it might be a couple thousand pixels on a huge monitor or it might be I don't know 300 400 200 something really tiny so it scales now to illustrate VW's view width or a few port width I've added four divs in and I'll select all divs and just give them a hard-coded height maybe 150 pixels and then I'm gonna select the first div with ID of one and give it a width of 100 V H or V W rather to begin with and a background color of what should we do here how about red okay and I think I'm going to shrink this down actually maybe 250 pixels all right so that's 100 V W is always 100 percent of the viewport width whatever that is so there's no scrolling involved here this is the entire div it's always taking up that available with I'm going to do the same thing but for the second div and I'll set it to be a tvw I'll give it a different color how about orange and now it's always 80% of that viewport width let's say that I have one more I guess I'll limit this to three probably so let's do our third div and said that to be 50 VW's get rid of that fourth div and give it a color of yellow it's always going to be 50% of that available viewport width so think scale and this can be super useful when you're designing responsive websites which for the record is a topic I will be teaching shortly on this channel if we had some nested content let's say inside of this div with idea of three I have two divs in there inside of this third div nested one and nested two so I'm going to select nested one and maybe I want to split this up 50/50 if I tried to use VW's it would not go very well for me so let's give this a smaller height let's do a 50% height of the parents okay so that works well you have half that height and then if I use VW's for width I have not going to get anything relative to this parent so I have to know exactly the width of that parent which is 50 V W so if I wanted this to be half of that it would be 25 VW's which can be annoying to use and to have to calculate and divide things and whatever it will scale right and it's always going to be half of this which is half of the entire viewport width but it's much easier in my opinion just to use percentages I could say I want this thing to be 50% the width of its parent and we get the same thing and now I've added some styles in for the second div and I can also give it a width of 50% which is easier when you're trying to split up space whether it's even or not you know maybe I want it to be a 20 80 % splits it doesn't matter what the dimensions are if the parent or what the viewport is so I can use VW or VH to set some larger container which is what I usually do to make these sections here but then within them I'll often use percentages or some other unit for smaller pieces or for divvying up the space more so that's it for the units I'm going to show in this video there still are others that we have not discussed but these are by far the most common and something you might be thinking at this point is which one should I use when so these are just general guidelines that I like to follow they're not rigid and there's a lot of flexibility and different companies different developers have different preferences in general I avoid using pixels for font sizes except when I'm just teaching the very basics because pixels are easy to grasp and I don't know not having to explain REMS & M's is nice early on but generally I don't use them for font sizes they don't scale browsers these days can zoom and increase your font size so you know if I had a pixel value which I don't but if my h1 was set with a pixel value like how about 100 px as i zoom in and out here the browser is able to scale that for me but with older browsers that actually wasn't a thing but if you want your text to be responsive to the point where you can change all the fonts you can multiply them by two or cut them in half or change them somehow relative to one another using pixels is not a good way to go however I do often use pixels for small details like the width of a border usually the width of a box shadow or a border if it's a couple pixels you're not going to scale that as your screen size changes or as some width changes usually that is going to stay the same so I use pixels for borders shadows tiny details Rams and M's I like to use for font sizes and often for padding and margin I prefer REMS most people do but there are situations where M's make more sense or can make things easier for you as I showed with this button where we have the border radius and padding set using ms and then percentages I like to use for defining layouts for defining widths of things or heights even if I wanted you know two or three or four images sharing the space of some parent div or a section or I want my links in a nav bar to take up some percentage of that navbar I personally like using percentages and then for larger layout concerns like we just discussed I like V H and V W if you're trying to make a full-sized background or you're trying to make something full with and you want it to scale you don't want to hard-code a pixel value which you shouldn't VHS and vws are a good choice so I know this has been a lot and maybe not the sexiest video in CSS not that much is and maybe like animations or something but this stuff is very important already so thanks for watching everyone the good news is now that we've covered units and all these crazy different options we can now learn flexbox which is a very powerful important piece of creating layouts in CSS so the next few days look out for a video on flexbox it's definitely a flashy or maybe a sexier topic than units but units are chord to pretty much everything you'll do in CSS so hopefully you made it through this you didn't fall asleep if you did I hope you had a nice nap and my voice was soothing enough I doubt it I hate listening to my voice but maybe it was nice and soothing and relaxing for you please consider sharing this video but especially please consider sharing this entire playlist all this cold sea code camp stuff share it with anyone you know who might be interested anyone who stuck at home recently unemployed I really really appreciate it I'm trying to keep this going it it is kind of a lot of work honestly each one of these videos is pretty much a full day of me working on the video and doing nothing else I enjoy doing it but I do really appreciate you sharing this with anyone and I hope you're all staying healthy saying safe wash your hands of course and I'll see you soon in the next video which will be on CSS flexbox alright good bye

Channel: Colt Steele

Views: 17,745

Rating: 4.9967051 out of 5

Keywords:

Id: fi81bovqxXI

Length: 30min 26sec (1826 seconds)

Published: Mon Apr 13 2020