A CSS Unit Deep Dive - Learn CSS Units & When To Use Them

there's at least 40 plus different light units in the CSS specification and initially I was going to go over literally each one of them until I realized how silly of an idea that was the truth is many of these units should either not be used at all or are rarely used for web design for example in CSS there are two types of linked units absolute and relative the absolute CSS link unit is a unit of length that provides a precise and fixed size for the element they're applied to these units include centimeters millimeters quarter millimeters inches because points and pixels but out of all of them only the pixel unit should be used in web design and web development on the other hand a relative CSS length unit is a unit of length that is relative to either a font size or relative to the size of the viewport these units include the following but in most cases you're only ever going to need 10 of them and out of these 10 units only four of them are actually units you absolutely need to know this is not to say that the other units are useless because they're not but they're not frequently used in practice and can be learned in an eternal basis you might think that the pixel unit is the easiest to understand but actually it's the most complicated unit of all you see there's a lot of confusion about the pixel unit some people think it's a measurement that never changes some people think it's a distance measurement some people think it's a relative unit despite being defined as an absolute unit some people think it's somewhere in the middle and refer to it as a hybrid of both absolute and relative some people think it's a non-linear angular measurement or in other words uses mathematics under the hood and some people think it's relative to the pixel density of the device While others think it's relative to the expected viewing distance of the device well which one is it the truth is if you read one article it'll tell you one thing and present the information as being objectively true then you'll read another article that contradicts the previous article whilst simultaneously presenting the information as being objectively true however here's some non-subjective objective facts about the CSS pixel unit on my 27-inch 1080p monitor I have a box with a width of 96 pixels and a height of 96 pixels if I take a ruler and measure the width of my box I should get 2.54 centimeters because 2.54 centimeters equals one inch but as you can see on my screen it's actually almost 3 centimeters then on my phone which surprisingly has a 1440p resolution the size is 1.4 centimeters on my 27 inch 1440p monitor the size is 2.2 centimeters and finally for the cherry on top of the cake we have my television with a size of well I don't even know what the size of my television is something above 50 inches I think but anyways the size of the box is 5.5 centimeters so we've got a bunch of different sizes for the same box well why why is one CSS inch not actually one inch when I measure it and why am I getting different sizes for the same box on different devices well first of all it's important to understand that the CSS absolute units aren't necessarily the same as the real world counterparts for example one inch and and the real world equals 2.54 real world centimeters however in CSS although one CSS inch equals 2.54 CSS centimeters the output for these units are totally dependent on something called The Anchor unit if the output is for print or a similar resolution to print then a physical unit is the anchor unit in other words CSS will output measurements equal to those of the real world so one CSS inch but for print would be the same as one inch as measured with a ruler across your printed paper but if the output is for screen media including high resolution devices low resolution devices and devices with unusual viewing distances pixel is the anchor unit in this case where pixel is the anchor unit its measurement will be dependent on something called the reference pixel unfortunately the official explanation of the reference pixel on the w3c CSS specification is what leads to literally all of the confusion related to the pixel unit the official explanation is as follows and and I quote the reference pixel is the visual angle of one pixel on a device with a device pixel density of 96 DPI and a distance from the reader of an arm's length for a nominal arm's length of 28 inches the visual angle is therefore about 0.0213 degrees for reading at arm's length one pixel does corresponds to about 0.26 millimeters or 196 of an inch this explanation is what led a lot of people to believe that the pixel unit is a non-linear angular measurement but we can see that this is not the case with the following paragraph and I quote the image below illustrates the effect of viewing distance on the size of a reference pixel a reading distance of 71 centimeters or 28 inches results in a reference pixel of 0.26 millimeters while a reading distance of 3.5 meters or 12 feet results in a reference pixel of 1.3 millimeters notice how the reference pixel is referred to in millimeters rather than radians degrees or grads and how the reference pixel changes with viewing distance whereas the angle would be constant the reference pixel in more simpler terms is a pixel that looks exactly the same in all viewing situations relative to the expected viewing distance of a device this is why I had different measurements across the different devices I measured because they all had different expected viewing distances the expected viewing distance for my television substantially surpasses the expected viewing distance on my monitor and although the Box had a different physical measurement the Box actually looked exactly the same relative to the size difference of both the TV and the monitor this standard is beautiful because it creates consistency across all devices regardless of their size and pixels per inches so in summary the pixel unit is a measurement of length that is relative to the expected viewing distance of the device being used and if none of this made any sense that's okay like I said it's one of the most complicated unit of all but the beautiful thing about it is you don't need to understand it to use it when pixel will always be the smallest width to make a line visible on on the specific device and that's really all you need to know to use it now that we understand how the pixel unit works we can finally move on to the m and RAM unit but first we need to understand what problem they actually solve in the real world in my HTML all I have is a container with an unordered list of four list items then in my CSS I can select the unordered list and give it the font size property when I set the font size to 16 pixels we see nothing is happening and if I comment it out we see we still have the same font size the reason this is happening is because 16 pixels is the default font size of all of the popular browsers including Chrome which happens to be the one that I'm using we can actually see that this is the case when I open my settings on my browser go on the appearance Tab and find the customize fonts button we see that the default font size is set to 16 pixels and as it happens two percent of users change this value for accessibility reasons and when it comes to the internet three percent is probably a few million people the reason I'm showing you this is look at my unordered list changing sizes as I change the default font size on my browser you can see it grows and shrinks as I change the default font size on my browser however back in my CSS file if I were to explicitly set the font size on my unordered list the 16 pixels and try changing the default font size of the browser we see it's not working this is one of the pitfalls of using the pixel unit anywhere and on any property some people make the mistake of adding a pixel font size to the HTML element to overwrite the default not knowing that they're actually screwing with the accessibility preferences of potentially three percent of their user base setting a pixel font size on the HTML makes your entire website ignore the preferences of people that took the time to modify the setting big disrespect don't do this but this is where the relative units come into the mix unlike the pixel unit which is an absolute unit the m and RAM units are categorized as being relative units that are relative to a font size in the case of the munit it is relative to the font size of the element it is assigned to unless it is assigned to the font size property in which case it will be relative to the font size of the parent so for x example when I set the font size on the unordered list to 1M we see nothing happened and this is because over on the HTML the 1M that is assigned to the font size of the unordered list is asking the parent container for its font size well I didn't set a font size on the container so it asks the next parent but again I did instead of font size on the body and after the body there is no other parent to ask so it defaults to being relative to the font size of the root element which is 16 pixels by default however if I select the container and give it a font size of 32 pixels for example now 1M on the UL element is relative to the font size of the container because the container is the closest parent with a font size defined we see the font size on our list items are now way bigger but earlier I said using pixel values is problematic for accessibility reasons so what I can do is replace the 32 pixels with 2m and we see we get the same result the reason we get the same result is because on the container the munit is asking the parent of the container for its font size the body doesn't have a font size and because there is no other parent after the body it defaults to being relative to the root element which has a font size of 16 pixels by default also we set the M unit to 2 which means it's 16 pixels times 2 which is 32 pixels the same value we had before when I try to change the default font size in my browser settings we see our list items are growing and shrinking just as expected but although the munit fixed the issue we had with accessibility it introduced another problem in our code imagine I give the body a font size of 1.5 M we see our items increased in size now imagine I also add a font size of 2m on the list elements we see our items grew in size again the issue isn't with the size of our items but with the fact that we've got four font sizes that are depending on each other and this makes it super difficult to keep track of the actual size of each element so for example what does 2m represent in our list element well we have to look at the parent but the parent also uses the munit so we have to check the parent of the parent while the parent of the parent also uses the M unit so we have to ask the parent of the parent of the parent and you get my point this is crazy and you shouldn't be doing this instead what we can do is replace everything that has the M unit with the REM unit and now we see our items all have a more reasonable size the way the ram unit works is instead of being relative to the font size of the parent it is being relative to the font size of the root element the root element is the HTML element and the HTML element has a default of 16 pixels using the ram unit solved the cascading problem that we had with the munit where each font size was dependent on a chain of parents and as a general rule whenever a set of value on the font size I always use Rams I never use the M unit for font sizes but that doesn't mean that I never use it on the HTML I'm going to remove the unordered list and replace it with a button and give it the class of button then on my CSS I'll remove everything and select the button by its class name I'll give it a background color of red a color of white and I'll give it a font size of 1.5 run our button needs some padding earlier I said that the M unit is relative to the font size of the element that is assigned to unless it is assigned to the font size property in which case it'll be relative to the font size of the parent this means that when I use the munit on the font size property it becomes relative to the parent element however if I give a padding to my button of 1M because 1M isn't on a font size it is then relative to the font size of its own element this is where the M unit really shines it's an amazing unit to use on paddings margins and widths because when it isn't assigned to the font size property it becomes relative to the font size of its own element and we can see that this is the case when I change the font size on my button we see the padding is always being relative to the font size of the button itself this means we don't really need to worry about the padding ever again when we change the font size on our button in this chapter we're going to be looking at percentages and the two main viewport units in my HTML all I have is a header with the class of header a div with the class of section container and nested inside the div is an H1 heading with the class of header title we're going to be creating a header so in my CSS I'll select the header by its class name and give it a background color of light blue a color of white and a padding of one amp for the top and bottom and zero for the left and right I'll also select the H1 by its class name and give it a font size of 2.5 RAM and a margin of zero then I'll select the container by its class name and give it the border of 3 pixel solid red just so we can see it and a width of 80 percent you see our border shrunk in size if I comment out the width for one second we see the Border covers the entire width and this is because percentages are relative to their parent the parent of the section container is the header and the header is a block level element so it covers 100 of the width of the page when I uncomment the width on our section container it is relative to the width of the parent header and we can actually test this by adding a width of 50 on the header now the header is half in size and we see the section container's width of 80 is 80 relative to the width of the parent header percentages are always relative to their parent however if you don't want the width to be relative to the parent you can use the VW unit for example if I replace 80 percent with 80 VW we see our border now covers 80 percent of the viewport and this is because the VW unit is a view per unit and is relative to the viewport width there's also the VH unit it's the same as VW but it's relative to the viewport height instead I'll comment out the width on our section container and add a height of 100 VH on the header we see this covers the entire viewport height and if I set it to 50 VH it'll cover half of the viewport height use percentages when you want to size relative to the parent and use viewport units when you want to size relative to the viewport the last unit I want to talk about is the CH unit this unit is pretty simple all it does is measures the width of the character 0 on your font the reason this is useful is because we can use it to set a Max width on a paragraph and the reason you would want to do that is because on this example we see my text is super long it's ugly to look at and is hard to read to fix it I can select it in the CSS and give it a Max width of 60 CH we see this looks a lot better and the reason this works so well over using M's or Rams for setting a Max width is because in web design as a rule of thumb your paragraph should have a length per line of around 45 to 75 characters and using the CH unit makes the finding a specific Max character length super easy and there you have it hopefully now you have a better understanding of the units we talked about and for all the other units they are super rare and can be learned in a need to know basis if you enjoyed the video please consider liking the video and subscribing to the channel thanks for watching

Channel: Slaying The Dragon

Views: 68,131

Keywords: pixel, px, em, rem, vh, vw, viewport, viewport units, absolute units, relative units, reference pixel, anchor unit

Id: fzZTvLmmTzM

Length: 15min 13sec (913 seconds)

Published: Sun Dec 18 2022