Preview
Video Player
00:00
00:00
Introducing the Practice
3:44See an overview of what you will build using the core components of the CSS box model.
[MUSIC]
0:00
Hey everyone, Guil here.
0:04
Now you're going to sharpen your CSS
skills by practicing the fundamentals of
0:06
the CSS box model.
0:09
You've learned that the box model
is the basis of CSS layout.
0:11
It determines how elements
are displayed and
0:14
the amount of space they
take up on the page.
0:17
So in this practice workshop,
0:19
you will work with the main
components of the box model.
0:20
You're going to create this
scrolling box component with CSS.
0:23
To get started,
launch the workspace with this video.
0:27
First, click to open the image box.png
to view the box model representation of
0:31
the component you're going to create.
0:36
Remember, each component on
the page is like a rectangular box.
0:39
It has dimensions and
takes up a certain amount of space.
0:42
So in this box,
the content area is 556 by 256,
0:45
the padding area is 20 on each side,
the border area is 2.
0:49
And the margins are equal on
both the left and right sides.
0:54
You're going to recreate this.
0:59
So now let's walk through
what you'll need to do.
1:00
In the file box-model.css,
there are six comments with instructions
1:03
on the box model properties you'll
need to write inside the box rule.
1:07
So first, you'll give box a fluid width
of 90% and a height of 300 pixels.
1:11
But the width should never
be wider than 600 pixels.
1:18
Then, you will apply 20 pixels of
padding on all four sides of .box.
1:23
After that, apply a 2-pixel solid
border on each side of .box, and
1:28
you can set the border color
to any color you'd like.
1:32
And right below,
you'll need to use margins to
1:36
horizontally center align
the .box component on the page.
1:39
Now, at this point, you may notice that
since you set .box's height to 300 pixels,
1:42
the text inside it is overflowing.
1:48
So you'll need to use the property that
prevents the contents of .box from
1:50
overflowing and the value that displays a
scroll bar if and when content overflows.
1:54
When you get to this part of
the challenge, if you inspect the .box
2:00
component using your browser's developer
tools, I'm using Chrome DevTools.
2:04
You'll notice that the width of
.box is going to be 644 pixels, and
2:08
the height 344 pixels.
2:12
Well, remember, the height should
be exactly 300 pixels, and
2:14
the width no wider than 600 pixels.
2:18
So here, the browser is applying
an additional 44 pixels to the total width
2:20
and the total height of .box.
2:24
Why?
2:26
Well, it's creating that extra
space because of the padding and
2:27
border width values you applied to it.
2:30
This can cause problems in your layout.
2:32
So, for example,
2:34
you may have columns that need to be
exactly the width you've defined.
2:34
Otherwise, your column layout might break
and they won't line up side by side.
2:38
So instead of manually subtracting
44 pixels from the width and
2:41
height values of .box, CSS has a feature
that automatically does it for you.
2:45
It alters the default CSS box model
by including any border width and
2:50
padding values into the total width and
height of a box.
2:54
Now, this step is optional, because you
may have not learned about this yet.
2:57
But if you wanna give it a try,
I've posted resources that can help you
3:02
solve this part of the challenge
in the teacher's notes.
3:05
So here, you'll need to include a property
and value that forces the border width and
3:07
padding values into the total width and
height of .box.
3:12
The goal of this practice session is to
get the CSS box model of the box element
3:16
to match the diagram shown in box.png.
3:20
You can even see a live box
model view of the element
3:24
when you inspect it in your
browser's development tools.
3:27
When you're finished,
your page should look similar to this.
3:31
This is a great way to practice
what you've learned so
3:35
far about the CSS box model.
3:37
Good luck, have fun, and in the next
video, I'll walk you through the solution.
3:39