0:00
Hey guys, what's going on? You're watching CSS for Beginners lesson 42, and in this video
0:11
we're going to talk about the width and height properties in CSS. Alright, so so far in this course we've talked about the box model quite a lot, and we've
0:20
said that the box model controls the spatial properties of block level elements, and we've
0:25
also talked about what block level elements are. So we've discussed the margin, we've discussed padding, and we've talked about borders as
0:32
well, but we've not really talked about the width and height properties in any great detail
0:37
so that's what we're going to take a look at today. Okay, so I'm back here in the code now, and as you can see I've added these four div tags
0:45
right here, and the first one has got a class of static width, the second one has a class
0:49
of percentage width, and the bottom two here have classes of inline block
0:54
I've also added a selector up here which is going to target all of these divs, it's
0:58
going after all of the divs within the main content, remember the main content is here
1:02
and it's going after all of these divs within that. And it's giving those a background colour of a light grey, and it's giving them a margin
1:08
bottom of 20 pixels. Remember the way this margin shorthand works is top, right, bottom, left
1:15
Okay so let's take a look at what this looks like in a browser before doing anything else
1:24
Okay then, so there they are, and we've got our four divs within this parent element
1:28
and they're all taking up 100% width of the parent element, minus this area here which
1:34
is the padding on the parent element. So remember all block level elements automatically take up 100% of the parent element's width
1:42
so that's why they're doing that. So what we're going to do now is take a look at the width and height properties in the
1:47
code and mess around with those a little bit. And the first thing I'm going to do is go after this static width div here
1:56
So to do that I'll do my class selector, start it with a period, and then say static width
2:02
and then we'll give it some values. Now the width property is just width, and by static width I mean we're going to give
2:09
it a pixel value, and we'll just say 300 pixels. And that's static because no matter how big your browser is, or how big the parent element
2:17
is, we're saying to this one here, it's always going to be 300 pixels
2:21
And we're going to do the same for the height, and we'll just give that a height of 100 pixels
2:28
So let's view this in a browser now and see what it looks like
2:31
Alright, cool, so there it is. It's a width of 300 pixels and a height of 100 pixels
2:40
So now we're going to take a look at percentage width. And to do that we'll go after our percentage width class here, and we'll give it a width
2:52
property, and this time I'm going to say 70%. So what that there is saying is whatever width the parent element is, I want this div to
3:03
be 70% of that width. And then we'll just give it a height of 50 pixels
3:09
So the height is always going to be static, but the width is going to be dynamic depending
3:12
on how wide the parent element is. So let me show you that in a browser
3:20
Okay, so here now you can see this grey box is about 70% the width of this white box
3:29
which is good, because if we were designing for a mobile screen, then maybe the browser
3:36
and the white box would be smaller. And now you can see here, as I increase and make this window smaller, that this white
3:44
box is getting smaller, and subsequently this grey box is getting smaller, because this
3:51
grey box is always 70% of this white box. So this is really good for mobile devices
3:59
If you're designing a website that's going to scale down to mobiles, then it's really
4:04
good to work with percentages, because whereas this 300 pixel block you can see now is creeping
4:10
over the edge, this 70% width one here is always 70% the width of this parent element
4:18
So it's never going to do this. So that's really cool. So now let's look at these two here, which I've given a class of inline block to
4:26
So we'll tag it both of those. And this time what I'm going to do is say give them a width of 40%
4:34
And we know that block level elements stack on top of each other
4:39
Now in this case, I want these to stack side by side, and we know to do that, we have to
4:43
give it those inline properties, because inline elements stack side by side
4:48
However, if we were to say display inline, we know that that will take away the box model properties
4:56
So we don't have full control over those, because the box model only controls block
5:00
level elements. So what we need to do is say inline block to get the best of both worlds, remember
5:07
So we're getting that side to side property we get with inline elements, but we're also
5:11
getting the block level element properties, which is going to let us control the box model
5:15
properties, things like margin and padding. So let's save that now and view this in a browser
5:24
Cool, and there we go. Now we have a 40% width here for this one, and right next to it another one which is
5:35
40% in width too. And same again, if we inspect the elements and scroll this in and out, or rather zoom
5:44
it left and right, we can see them getting smaller and getting larger, depending on how
5:49
large this parent element is. So that about covers everything we need to talk about when it comes to width and height
5:58
If you have any questions whatsoever, feel free to throw a comment down below, I'll answer
6:02
all of those as soon as possible. Otherwise, if you enjoy these videos, please like, subscribe or share, and I'll see you
