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.