Up next in 10
Learn CSS Units In 8 Minutes
904 views
Feb 7, 2024
"Learn CSS Units In 8 Minutes" is an educational video that aims to provide a concise overview of CSS units commonly used in web development. The creator likely covers a variety of CSS units, including absolute units like pixels (px) and relative units like percentages (%), as well as other units such as em, rem, vh, vw, and more. The video likely explains how each unit works and when to use them effectively in styling web pages. By condensing the material into a short duration, the video offers viewers a quick and accessible way to learn about CSS units, helping them improve their understanding of web design and layout. Viewers can expect to gain practical knowledge of CSS units within a brief timeframe.
View Video Transcript
0:00
Hello everyone, in today's video I'm going to be showing you all of the CSS units that you need to
0:05
know and I'll also be comparing them against each other so you'll finally know the difference
0:10
between REMs and EMs, percentages and view widths, and so on. So let's get started now
0:20
Welcome back to WebDev Simplified, my name's Kyle and my job is to simplify the web for you
0:25
so you can start building your dream projects sooner, so if that sounds interesting to you
0:29
make sure you subscribe to my channel for more videos just like this one. And now to get started
0:34
I first want to look at the differences between pixel units and percentage units because this is
0:38
probably the easiest thing to understand the difference between. Essentially a pixel unit
0:43
is going to be an absolute width which is always going to be the same no matter where it's defined
0:48
and a percentage is going to be a percentage width that's actually based off of its parent size
0:53
So if we take this example over here on the right hand side I have this red box which has a width
0:58
of 50% and this red box with a width of 100 pixels and you can see this 50% box is 50% of the
1:04
size of the screen while the 100 pixel box is 100 pixels wide. Then if we look down here inside of
1:11
this black box both of these red boxes are inside this black box so now the 50% is 50% of this black
1:18
box while the 100 pixels is still 100 pixels wide, it hasn't changed, but the 50% has actually shrunk
1:25
down to be only 50% of its parent container. And I have all the CSS and HTML over here you can see
1:31
50% for the width of 50% and 100 pixels is our width of 100 pixels and it's all defined on our
1:37
classes for our HTML down here inside of the body. And this is pretty easy to understand most people
1:43
can see the difference between percentage widths and pixel widths because one of them is absolute
1:47
and one is relative, but something that trips up a few people is another type of relative width
1:52
which is called the view width and the view height. So let's open up the code for that over
1:56
here on the side and you can see we have 50% still being defined for this box and it still behaves
2:02
both the same inside of this black box down here and the same outside in the parent section, but we
2:07
have what's called view width and view height units, these vw and vh. So a vw unit, one vw equals one
2:16
percent of the entire screen size on the width, so one percent of the width of my entire screen
2:21
is one vw. So 100 vw would take up the entire width and 50 vw obviously would take up half the
2:28
width, but the important thing about vw versus percentages is that viewport units, these vw and
2:34
vh, are based on the entire screen size while percentages are relative to their parent. So if
2:41
we look down here in this bottom section you can see this 50 view width units is expanding outside
2:46
of its parent because it's always going to be 50% of the entire width of the screen and not based on
2:52
the parent itself, and if we look over here in the css you can see we set the width to 50 vw for these
2:59
red containers that have 50 vw and this 25 vh we set the view height, so the height, to 25 view
3:06
height units, and those work exactly the same as the view width units except for view height units
3:11
one view height unit or view h unit is going to be equal to one percent of the height of the screen
3:17
so for example 100 vh would be our entire screen height while 25 vh in our case is going to be
3:23
equal to 25 percent of the screen height, and it doesn't matter what you put it inside of it's
3:28
always going to be based on the entire screen size and not based on the parent. So that's the
3:33
major difference between vw and vh units and the percentage units percentages are relative to
3:39
parents while the vw and the vh units those are going to be relative to the entire screen size
3:45
and don't care about their parent at all. Now those are some fairly simple units out of the way
3:50
but we're going to move on to probably the most confusing set of units and that is the rem versus
3:55
the em. To get started both rem units and em units are relative but instead of being relative to
4:03
things around them such as the width of their parents or the height of the parents they're
4:06
actually relative to the font size that you have defined. So an rem stands for root that's what the
4:13
r stands for so that's relative to our root font size while em is not relative to the root it's
4:19
just relative to its parent. So if we look here we have this first section which is all one level deep
4:25
see right here we have this html all of these are children of the root element they're children of
4:30
our body so rem and em are going to behave exactly the same because they have the same root font size
4:37
and parent font size so as you can see one rem and one em are the same and same thing with two rem and
4:43
two em but now this second section inside this black box they're inside of a parent and that
4:49
parent has a font size of 30 pixels which is larger than the root font size so we can see that our one
4:55
rem is still the same as our one rem that's not inside the parent but our one em is actually quite
5:02
a bit larger than our one em up here and that's because it's essentially 100% of the parent's
5:08
font size while one rem is 100% of the root font size and that'll be the font size defined on html
5:16
for example and that's actually going to be based off of your browser almost always it's going to
5:21
be 16 pixels or so but you can change that yourself if you really want to but for these purposes you
5:27
can see that one rem is always going to be the same no matter where it's defined in your application
5:31
one rem is always the same but one em is going to be different because it's based on the size of its
5:37
parents font size and our ems can be a little bit difficult to work with because if you have a lot
5:43
of ems nested inside of each other they'll start to grow really really quickly because you may have
5:48
one that's two em inside of another two em inside of another two em so they're all going to be twice
5:53
as big as the previous one and it's going to balloon very quickly while rems those would all
5:58
be exactly the same because they aren't based on the parent and we can even see that our two rem
6:03
is the same as our two rem out here but our two em is essentially double the size of our parents font
6:09
which is 30 pixels so this right here is 60 pixels and down below here i have another example of
6:15
using rem and em but it's actually for sizing these boxes off to the left these red boxes if
6:20
we come down here i have an icon container which is either our root font size or these large ones
6:26
at the bottom are going to be the larger font size as you can see down here so the reason we're using
6:32
em versus rm as you can see this box on the left here is one em tall and wide right here you can
6:37
see one em width one em height so it's the same size as the font and our rem is the same size as
6:43
our root font but when we scale up our font we also want our box to scale up so we keep it at
6:48
one em and it'll scale with our font size we don't have to change the size of our box but down here
6:53
this one rem the box doesn't change because it's based on the root font size and not the parent
6:58
font size so this is one case where using em is actually really useful for sizing things as
7:04
opposed to just making your font larger or smaller overall for the most part i use rem when defining
7:11
my font sizes because it makes things easier to work with but for certain cases such as this ems
7:16
are really useful so that you have certain things scaling with other certain things such as these
7:21
red icons for example and now lastly i want to talk about percentages in the case of fonts because
7:27
you can actually use percentages with fonts and it's going to work exactly the same as em because
7:33
as we know percentages are based on the parent and em is based on the parent so a font size of 200
7:40
is exactly the same as a font size of 2em same thing with 1em 100 it's going to be exactly the
7:47
same so as you can see here all of our rem em and percentages are the same when they're at the root
7:52
level but when we get inside this parent that has a larger font size the 2rem stays exactly the same
7:57
but our 200 and 2em actually scale with each other they both are 200 of the parent's font size
8:05
now there's actually one more relative unit inside of css and that's the fr unit which
8:10
stands for fractional unit but these are only useful inside of flex containers so for example
8:16
we have flexbox and grid and that's the only places that you can use these fractional units
8:21
and i have entire videos on both flexbox and grid so if you want to learn more information about the
8:27
fr unit make sure to check out either my flexbox tutorial or my grid tutorial both of those will
8:32
go in great depth on that and that's all there is to css units if you enjoyed this video make
8:38
sure to check out my other videos linked over here and subscribe to my channel for more videos
8:43
just like this one thank you very much for watching and have a good day
#Computer Hardware
#Electronics & Electrical
#Programming
#Software