CSS Tutorial For Beginners 42 - Width & Height

Hey guys, what's going on? You're watching CSS for Beginners Lesson 42, and in this video

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

said that the box model controls the spatial properties of block level elements, and we've

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 well. But we've not really talked

about the width and height properties in any great detail, 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

right here, and the first one has got a class of static width, the second one has a class

of percentage width, and the bottom two here have classes of inline block. I've also added

a selector up here which is going to target all of these divs, it's going after all of

the divs within the main content, remember the main content is here, 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 bottom of 20 pixels. Remember the way this margin shorthand

works is top, right, bottom, left. Okay so let's take a look at what this looks like in a browser before doing anything else

Okay then, so there they are, and we've got our four divs within this parent element

and they're all taking up 100% width of the parent element, minus this area here, which

is the padding on the parent element. So remember, all block level elements automatically take

up 100% of the parent element's width, 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 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. So to do

that I'll do my class selector, start it with a period, and then say static width, 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 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 is, we're saying

to this one here, it's always going to be 300 pixels. And we're going to do the same

for the height, and we'll just give that a height of 100 pixels. So let's view this in

a browser now, and see what it looks like. Alright, cool, so there it is, it's a width

of 300 pixels and a height of 100 pixels. 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 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 be 70% of that width. And then

we'll just give it a height of 50 pixels. So the height is always going to be static

but the width is going to be dynamic depending on how wide the parent element is. So let

me show you that in a browser. Okay, so here now you can see this grey box is about 70

the width of this white box, which is good because if we were designing for a mobile

screen then maybe the browser and the white box would be smaller. And now you can see

here as I increase and make this window smaller, that this white box is getting smaller, and

subsequently this grey box is getting smaller because this grey box is always 70% of this

white box. So this is really good for mobile devices. If you're designing a website that's

going to scale down to mobiles, then it's really good to work with percentages because

whereas this 300 pixel block you can see now is creeping over the edge, this 70% width

one here is always 70% the width of this parent element. 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, 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%. And we know that block level elements stack on top of each other

Now in this case I want these to stack side by side, and we know to do that we have to

give it those inline properties because inline elements stack side by side. However, if we

were to say display inline, we know that that will take away the box model properties. We

won't have full control over those because the box model only controls block level elements

So what we need to do is say inline block to get the best of both worlds, remember

So we're getting that side to side property we get with inline elements, but we're also

getting the block level element properties, which is going to let us control the box model

properties, things like margin and padding. So let's save that now and view this in a

browser. Cool, and there we go. Now we have a 40% width here for this one, and right next

to it another one which is 40% in width too. And same again, if we inspect the elements

and scroll this in and out, or rather zoom it left and right, we can see them getting

smaller and getting larger, dependent on how large this parent element is

So that about covers everything we need to talk about when it comes to width and height

If you have any questions whatsoever, feel free to throw a comment down below. I'll answer

all of those as soon as possible. Otherwise, if you enjoy these videos, please like, subscribe

or share, and I'll see you guys in the next one