- CSS and HTML 4:37
- CSS Selectors 6:26
- CSS Properties 5:20
- CSS Selectors and Properties Quiz 6 questions
- CSS Colors 4:19
- CSS Box Model 12:47
- Text and Fonts 7:32
- Colors, Box Model, Text, and Font Quiz 6 questions
- CSS Positioning 6:06
- CSS Images 3:31
- The Magic of CSS 2:31
- CSS Fundamentals Quiz 6 questions
Preview
Video Player
00:00
00:00
CSS Box Model
12:47Delve deep into the CSS Box Model, covering aspects such as width, height, margin, padding, border, and max-width in theory. Then, put your knowledge into action as we demonstrate how to control element size, spacing, and layout in a practical hands-on session.
Imagine your web page as
a collection of boxes.
0:00
Each box represents an HTML element,
and using CSS,
0:04
we can define the style, layout,
and dimensions of these boxes.
0:08
If we have a look at our
website as it is now,
0:14
we can see that the header,
footer, main, and
0:17
divs all have a black border allowing
us to see a bunch of different boxes.
0:20
This concept is called the CSS box model.
0:26
When we think of a 2D box,
we know that it has a width and a height.
0:30
The box concept is no different.
0:35
HTML elements have a width and
a height property.
0:37
These properties control the size of
the content area within an element.
0:41
This determines how much space
the element occupies on a webpage.
0:46
For example, let's try to make the image
smaller, perhaps 200 pixels wide.
0:51
In the #intro img CSS rule
block we wrote earlier,
0:57
let's target the width property and
give it a value of 200px.
1:01
Save and refresh.
1:06
You can see that our image is now much
smaller, 200 pixels wide to be exact.
1:11
We can do the same with height to make
the image 200px high instead of wide.
1:17
Along with the width and height, we can
also make use of max-width and max-height.
1:23
These allow you to set a maximum width or
height for an element.
1:28
It's useful for ensuring that elements
do not exceed a certain width and
1:32
maintaining a responsive and
visually appealing layout.
1:37
Having a look at our markup,
we can see that our header,
1:41
main, and footer is much narrower
than the browser view itself.
1:44
So on a new line, select header,
main, and footer.
1:49
And we'll give it a max-width
property of 800px.
1:56
Save the file and refresh the page.
2:01
Now that the header, main, and
footer have a max-width of 800 pixels,
2:06
if I reduce the window size
to be less than 800 pixels,
2:11
we see that the width
adjusts automatically.
2:15
Now that we know how to
determine the size of our boxes,
2:18
let's learn how to position
them using the CSS box model.
2:22
The CSS box model comprises of four areas,
content, padding, border, and margin.
2:27
Let's understand the rules.
2:33
Content area, this is where
the elements' content such as a text or
2:35
image is displayed.
2:40
Border area, the border is a visible
boundary around the element.
2:42
It can have different styles,
colors, and widths.
2:47
We target an element's border by
using the CSS property border,
2:50
which we've seen before.
2:55
Along with what we already
know about borders,
2:57
we can also use
the border-radius property.
3:00
This property is used to
give a box rounded corners.
3:03
For example, border-radius: 5px will give
a box some slightly rounded corners,
3:07
whereas a border-radius: 50 px will
give a box some extremely round corners.
3:13
Padding area, padding is the space between
the content and the element's border.
3:20
It provides breathing room for
the content.
3:26
We can target an element's padding
by using the CSS property padding,
3:29
like so, padding: 10px.
3:34
We can also target a specific side
of the element with a directive,
3:36
like so, padding-left: 10px.
3:42
This will apply a 10-pixel padding
to only the left of the element.
3:45
We can do this for the top,
right, left, or bottom.
3:50
Margin area,
3:55
the margin is the space outside of the
element separating it from other elements.
3:56
It controls the spacing between
the elements on the page.
4:02
We target an element's margin by
using the CSS property margin,
4:05
like so, margin: 10px.
4:11
Just like with padding, we can also
specify a direction to apply margin,
4:13
like so, margin-top: 10px,
4:19
which will apply 10 pixels of margin
to just the top of the element.
4:21
The values for padding and
margin are quite special,
4:27
as we can provide between one and
four values.
4:31
If we provide one value, like 50px,
this will apply 50 pixels to each side.
4:34
For example, 50 pixel padding on all
sides or 50 pixel margin on all sides.
4:41
If we provide two values,
like 50px 0, this will apply 50
4:48
pixels to the top and bottom, and
0 pixels to the left and right.
4:53
If we provided three values,
like 50 px 0 20 px,
4:59
this will apply 50 pixels to the top,
0 pixels to the left and
5:03
right, and 20 pixels to the bottom.
5:08
Lastly, if we provide four values,
like 50px 0 20px 5px,
5:12
this will apply 50 pixels to the top,
0 pixels to the right,
5:18
20 pixels to the bottom,
and 5 pixels to the left.
5:23
A unique and
5:28
highly useful option when working with
the margin property is the auto value.
5:29
Take this example, margin: 0 auto.
5:34
0 gives the element a margin of
0 pixels on the top and bottom.
5:38
Auto, when placed as the second value,
5:43
serves to horizontally center
the element within its container.
5:46
It ensures that the element occupies
the defined width with any remaining
5:50
space evenly distributed between
the left and right margins.
5:56
Let's see it in action.
6:00
Let's start with the one we're
familiar with, the border.
6:02
We can see from the markup that the image
has a border, so let's apply that now.
6:05
The color to use is the provided
dark brown: #75474a,
6:10
and it's 5 pixels wide
with a solid border.
6:16
So we'll add the following declaration
6:21
to the #intro img CSS rule block,
6:25
border: #75474a 5px solid.
6:29
Save and refresh.
6:34
And we can see the border directly
wrapping around the image.
6:38
Now, let's play around with padding.
6:42
We'll give the image
a padding of 50 pixels.
6:45
Within the #intro img CSS rule block,
add padding: 50px.
6:48
Save the file and refresh the page.
6:55
We can see that 50 pixels have been
added to all sides of this image,
7:01
essentially pushing the border
away from the content.
7:05
Finally, let's explore the margin.
7:10
Within the same CSS rule block,
7:12
add 50 pixels of margin,
using margin: 50px;.
7:15
Save and refresh.
7:21
And we can see that the content padding
and border has been pushed 50 pixels
7:24
away from the top, left, and bottom
of the space the image is taking up.
7:30
Now, the margin on the right
is impossible to see,
7:35
because there's no content directly
to the right of the image.
7:38
But there's a super helpful tool that
Google Chrome and Firefox come with,
7:42
the Box Model Viewer.
7:47
While viewing your web page, right-click
on the image, select Inspect, and
7:49
the Developer Tools panel should open up.
7:54
If you're using Chrome, make sure that the
Styles tab is selected in the right panel,
7:57
and then scroll down to the very
end where you should see a box.
8:03
In Firefox, make sure Layout is
selected in the lower right panel, and
8:07
you should see a box.
8:12
This box shows us the properties of
the four elements of our box model.
8:14
When hovering over the box model,
8:19
the different areas of our
image also get highlighted.
8:21
The content, which is our image,
we can see has a 200 pixel height.
8:26
The padding, which is 50 pixels,
the border, which is 5 pixels wide,
8:31
and the margin, which is 50 pixels.
8:36
All of these values are ones that we
wrote in the CSS earlier in this video.
8:40
To best match the image to the markup,
8:45
let's remove the padding,
margin, and height.
8:48
Let's now make the header, main, and
footer elements match the markup more.
8:52
It's centered horizontally, so
8:57
we can take advantage of
the margin's special value, auto.
8:59
Within the header, main,
9:04
footer CSS rule block,
add margin: 0 auto;.
9:06
This will give the top and
bottom 0 margins and
9:11
distribute the remaining horizontal space
between the left and right margins.
9:15
Save and refresh the page.
9:22
We can see that most of our
content is horizontally centered,
9:28
just like our markup, except for
the Back to the List link,
9:32
since this is not in a header,
main, or footer tag.
9:36
We'll fix this later in the stage.
9:40
Now, let's modify some
of our existing CSS and
9:43
add some new rules to get
us closer to the markup.
9:46
The header, footer, main,
div code block was just for
9:50
us to visualize the box model,
so that can go.
9:55
I'll save and reload the page.
9:58
But now, our main seems to
be missing its background.
10:02
So let's add that in using
a new main CSS rule block,
10:06
And give it the background-color of white.
10:12
Now, we'll want to give main some padding,
so
10:18
its content isn't sitting
right on the edge.
10:21
Let's give it a 25px padding.
10:25
Finally, let's mimic those
round corners we can see in
10:28
the markup with border-radius,
and let's set it to 10px.
10:33
Next, let's handle the header.
10:38
The Back to List link is quite
close to the main container, so
10:40
let's separate them.
10:44
Using CSS, we'll select the nav and
10:46
then give it a margin of 20
pixels only to the bottom edge.
10:49
Now, let's do the same with the footer,
but let's give it some room on top.
10:55
Pause this video and see if you
can apply a margin of 10 pixels to
10:59
the footer element, but
just on the top edge.
11:03
To get the 10 pixels of margin at the top,
I typed margin-top: 10px.
11:08
I have one final challenge for
you in this video.
11:16
Have a look at what the ingredients
section looks like in the markup.
11:19
It's in a light brown box
with rounded corners, and
11:24
there looks to be some space between
the edge of the box and its contents.
11:27
Pause this video and try to make this
light brown box happen using CSS.
11:32
You can use the empty #ingredients
CSS rule block that we wrote earlier.
11:37
Here's a clue.
11:44
The background color is the hex color
value we provided for almost white.
11:44
How did it go?
11:53
This is what I did.
11:54
In the #ingredient CSS rule block,
I gave it a background-color of,
11:55
let's check the hex value for
almost white, #f3eeea.
12:02
Then I gave it some padding,
5px for the top and bottom,
12:08
and 15px for the left and right.
12:13
Finally, I gave it some rounded
corners using border-radius: 10px.
12:16
Save the file and refresh the page.
12:22
Great work, our webpage is starting to
look more and more like the markup.
12:27
This was a huge video with
lots of new concepts.
12:32
Don't feel like you have
to forge ahead yet.
12:36
Feel free to rewatch this video to
really let the concepts sink in.
12:39
Once you're ready,
I'll see you in the next video.
12:43