Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
See an overview of what you will build using the core components of the CSS box model.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up