Original subtitles

The box model is one

of the most fundamental parts of CSS.

That's because it's the main factor that defines

how elements are displayed on a webpage

and also how they are sized.

So according to the box model,

each and every element on a webpage can be seen

as a rectangular box and each box can have a width,

a height, padding, margins and a border.

And we can specify all these using CSS properties,

but note that they are all optional.

So there can be boxes with no margins

or no paddings or no border at all.

Now this image here shows us how the box model works.

And so let's break it down, first the content of a box

is where all the text images

and other content that we specify goes.

We can easily define its height and with using

the corresponding CSS properties.

Next, the padding is a transparent area

around the content but still inside of the box.

And we use paddings to create white space inside of a box.

And we can define the padding

by specifying the padding property in CSS.

Next, we can specify a border for any box

and that border then goes around

the padding and the content.

And this actually we already did in the last lecture, right?

Then similar to the padding, we have the margin,

but instead of being inside the box,

the margin is white space

that's actually outside of the box itself.

So we can think of margin as the space between boxes.

So for instance,

if we want to create some space between two elements,

we will simply use their margin properties and CSS.

And finally, there is something called the fill area.

So remember how the text content

and images go inside the content box,

well, the same does not apply for background images

or the background color of a box.

These properties will actually be applied not only

to the content box, but to the entire fill area,

which also includes the padding and the border,

but not the margin, okay?

Alright, so let's go back to our code

and implement some of these properties.

Now, if we take a look at our page here,

we will see that actually there's already

a lot of space here, right?

For example, between this heading and this paragraph,

and here is space and here,

and there's also a lot of space

around this h2 element here.

And that's because by default,

some elements get some margin automatically

if we don't define them, okay.

Now that can create some problems

when we're trying to style our page.

And so usually what we do is that

we reset all of the margins and all of the paddings

on all elements before doing anything else.

So this is called a global reset.

And so to do that, we need to select all the elements.

And for that, we have a special selector

and that is a star selector, okay?

So again, with this,

we can select all the elements on the page.

So what we do then is to set the margin to zero pixels.

And when we use zero,

we don't even need to specify the unit.

So just a zero like this,

and the same for padding set to zero as well.

If I give it a save now, it looks like this.

So all the paddings and all the margins

are effectively gone.

And that's exactly what we wanted.

Now, we also need to add another property here.

I mean, we do not have to, but we usually always do,

which is the box sizing property set to border box, okay.

Now this will not change anything here,

and I'm not gonna go into detail what this does.

I'm just putting it here so that you know,

that we always use it, okay.

So essentially what this does is that

it will include paddings and borders into the width

or the height that we specify for an element.

So for example, if we specify the width of an element

to 100 pixels, and then add a padding of 20 pixels

on each side, then 100 plus 20 plus 20

would be a total width of 140 pixels,

which could create problems,

if all we wanted was a width of 100 pixels.

And so to fix this, we use box sizing set to border box.

And so in this case, if we specify the width to 100 pixels,

it will always be 100 pixels,

no matter how much the padding, okay.

And if that doesn't make a lot of sense

to you at this point, then you can always Google around

how it works, if you want to go into more detail.

But since this is just a crash course,

I'm not gonna go into a lot more detail.

So now what I want to do is to add back some margins

and some paddings so that you can see how exactly they work.

And let's actually add with the body

and here we will set some padding, okay.

And why do we use padding?

Well, it's because we want to add some space

inside of this body element.

So basically to create some space

between the border of the browser,

so of this view part and the content.

So let's set it to 75 pixels.

And by the way, there are also other units in CSS.

We don't always have to use pixels.

We can use percentages or other more weird units like em

or rem or points or anything like that.

But to start out it's easier

to just understand with pixels, okay.

So give it a save.

And so now you see that it added this nice space

between the sides, okay.

It's maybe a bit too much, put it back to a 50, okay.

And now let's move on and add some space

between this heading here and this paragraph.

And to do that, we can simply add some margin

to the bottom of this h1, okay.

So we can specify paddings and margins like this.

Or as we did here margin and padding

and that will then apply them

to the four sides of the element,

but we can also do that selectively

to only the left side or the right side

or the top side or the bottom side.

And so let's now add margin to the bottom of each one.

So margin and then bottom, and I'd say 25 pixels,

give it a save.

And here we have, okay.

Now, if we did padding here,

it would actually look the exact same way.

Let me show that to you.

And indeed it works the same way,

but now this space is inside of the h1.

Let me show that to you using the inspector.

So this is the h1 and two green part is the padding.

You can also see that here.

So this is the content,

and then we have 25 of padding

and here you also have to border

and then the margin outside of the border.

So outside of the element.

And essentially this is what we learned

at the beginning of this video, right?

But it makes more sense for this space actually

to be outside of the element.

And so a margin in this case makes more sense.

And so you see that now this 25

is here painted in red, right?

And so it's now outside of the element, okay.

So this elements tab here in the developer tools

is pretty useful to inspect the styles

of all the elements and also to check out the markup.

So the HTML in here.

We can turn on and off these different properties.

And in general, this is really helpful to work

with HTML and CSS in the browser.

Next up, we should probably also add some spacing

after the h2 elements.

So let's say margin bottom 20 pixel, okay.

And we can also do another thing

that I didn't show you before,

which is to set the text-align property.

So text-align,

and now we can set it to a left right or center.

And I wanna set it to center here.

And then as you expect the text will get centered here.

So basically centered inside this whole box.

So the h2 box, and again,

we can see the box using the inspector, okay.

So the box itself is this whole blue space

that we can see up there.

And so the text of the h2 is then centered

inside the h2 box, okay.

And remember that this is a block element.

And so that's why it creates a box basically.

So block elements are the elements

that create their own line and inline elements.

Remember, it's like the link here.

So if we inspect this one,

you see that the box only occupies the space

of the text itself, right?

It doesn't create a whole box on a whole line.

So that's the big difference between inline

and block elements now, right?

Okay.

So this form here, of course is also a block element.

And so let's make it a little bit more narrow.

And so, as we learned, by the beginning of the lecture,

we can do that using the width property.

So let's set it to 400 pixels

and that looks a lot nicer, okay.

Now we also want to create some space

between all this content and the border.

And so how do we do that?

Well, that's right.

We have to use padding because padding creates space

inside of the box and yes, indeed it does.

And now let's also create some space between the image

and this form here, okay.

And so here we can add some margin to the top.

So margin top, and let's say, well, 50 pixels.

Might be a bit too much now let's just edit to a 30,

so we can see it.

And now let me actually just show you what happens

if we take out this property here, okay.

So we comment it out,

just like we comment out code in JavaScript.

So let's hit Comment slash.

And so you see in CSS, the comments are like this.

So slash star star slash and not slash slash, okay.

And so as I save now,

take a close look here at this form

and you see that it now get wider.

So let's inspected here.

So the form, we need to select the form here

and then scroll down.

And so now you see what I explained earlier.

So we define the width as 400,

but then we have a padding of 25 here, right?

And so that gets added

to the total width of the element.

So we have 400 plus 25 plus here 25 here,

and then also five pixels border on each side.

So five here and five here.

And so that makes it then that the whole element,

adds up to 460 pixels, I would guess.

So you can see that here on the screen.

So up here that it says that the width

is actually 460, okay.

And so again, that's because it adds up all the borders

and the paddings to the width.

And that's what happens without box sizing to border box.

But as I put it back on, so again, comment slash.

If I save it now,

now we are back to what we expected.

So 400, so we set it here to 400.

And so we wanted it to be exactly 400

and not for all the other stuff to be added.

And so now, as you see here, it says 400.

And so automatically CSS then changed the width

of the content here to just 340

to accommodate the rest of the width.

Basically that's needed for the padding

and the border, okay.

So I said, I wouldn't go into a lot of detail,

(instructor laughs)

but I guess I just did anyway.

But anyway, let's now also add some margin

to these paragraphs here.

So I used the first class to select

this paragraph and this paragraph,

but now we want to select all three paragraphs.

And so for that, we can simply use the P selector

and that will then select all of them,

regardless of any class names, okay.

So margin bottom, and let's set it to 10 pixels or 20,

so we can see it a little bit better.

And so you'll see that, in fact,

the margin now got applied

to all three of these paragraphs, just as we wanted.

Next up, we can also select the input and the button.

So here we have to input and button elements

and we can also style them a little bit too.

So let me actually show you another cool thing.

So we have the input selector,

but now we want these rules that we're gonna write here

to apply to both the input and the button.

And so we can write input, comma, button.

And so this rule here will then apply

to both of these selectors.

So let's add a padding of 10 pixels

and increase the font size.

Let's say two 16 pixels.

So look at them now.

And indeed they got bigger

and they got this nice padding in there now.

And once more, you can see it that these two elements,

so input and button are inline elements.

So this one and this one,

they both don't create a box that occupies the whole line.

So again, just like the link

and I can actually show that to you

by styling just this link.

So let's say, a background color,

and set it to yellow.

And then here you see, and at least I hope you can see it.

Or let's actually set it to yellow green,

I think that's another.

Yes.

And so now you can see it.

And so the box now is only this element itself,

but not the whole width of the screen, okay.

So actually, yeah, let's leave it like this.

So you can have this as a reference and now to finish,

I just want to show you one final,

but very important selector.

And this one is actually pretty important for you to know,

because we're also gonna use this all the time

in JavaScript to select elements

when we do DOM manipulation,

because in fact, all the selectors,

the way they work in CSS, for example,

the dot first or here, the ID selector,

they're gonna work just the same

to select elements in JavaScript.

And so that's one of the reasons why it's very important

to learn how these selectors work.

So anyway, the selector that I wanted to show you

is the child selector.

So the example I have here

is that we have these two h2 headings.

So this one and this one.

But let's say I only wanted to select the h2 elements

that are inside of this form here, okay.

So of course I could go ahead and add an ID

or a class to this one.

So here I could add an ID or a class,

but I could also tell CSS to simply select this h1

that is inside of the element with the ID of your name.

And so this is how it works.

So again, we use the ID, your name,

so in just what we have here, and then a simple space,

and then another selector.

So in this case, that's simply the h2 selector,

but it could be any other selector.

So this here could also be a class selector

or another ID selector, alright?

But in this case, I just want to select the h2.

And so let's change the color of this one

and let's change it to, I think there's one called olive

or let's use this one, olive drab

and yeah, indeed.

Now this one is green and this one is not

because this one is not inside the element

with the ID of your name, right?

And so this one here is very useful

and we use it all the time in CSS.

And so that's why I wanted to show you

this one here as well.

Finally, just to make this a little bit smaller,

let's also change the size of the image

because that's also something very important.

So if we do not specify any sizes on the image,

it will simply be as large as it can, okay.

Or as large as the source image really is.

But usually we don't want that.

So on the image, it's pretty common to always set

either a height or a width attribute.

So let's do that here.

So this one doesn't have, or maybe it does have a class.

So, or actually, it has an ID, okay.

So we can of course use the image selector,

like I was just writing, but we can also use the ID.

So the difference is that with the ID,

if we add multiple images

then we would only select this one.

So let's actually copy this one and use this.

So ID, and then the name of the ID.

And let's set the width here to 200 pixels.

So what do you think will happen then to the height?

Well, it scaled proportionally, okay.

So that's very nice.

Let's make it a bit bigger 300 pixels.

And so we don't have to worry about the height.

We can still set it, but with that,

we will then change the aspect ratio.

So if we set the height to also 300 pixels,

it would then become a square (laughs).

Yeah, that's right.

Okay?

And if we now turned off the width,

so let's comment it out

then it will again scale proportionately.

So the height is now 300

and then the width is calculated automatically.

Let's set it back.

And usually it's easier to simply specify the width, okay.

That looks nice.

Let's change the h1 a little bit to 35

to make it fit all in one line.

And yeah, we have a nice little page here.

It's not the best looking,

but I think it taught you some things about HTML and CSS,

at least to the very fundamentals.

So of course we only scratched the surface here.

So probably this is less than like 5%

of everything that there is to learn about CSS.

So we didn't really talk about positioning.

We didn't talk about flexbox or CSS grid

or many other important topics,

but it wasn't also really the goal here.

I just wanted to get you up to speed

with the fundamentals of HTML and CSS

so that you can understand a little bit of the code

of projects that are included here in the course,

and also so that you can learn how these selectors work,

because as I mentioned,

we will use them in JavaScript to select elements as well.

So I hope you liked this small crash course.

And I also hope I got you interested in HTML and CSS

so that you now go ahead and research

maybe a little bit more about it.

Anyway, and with that being said,

let's now go straight into DOM manipulation

in the next section,

because that's really exciting and really cool.