1
00:00:00,000 --> 00:00:04,776
[MUSIC]

2
00:00:04,776 --> 00:00:06,442
Hey everyone, Guil here.

3
00:00:06,442 --> 00:00:09,940
Now you're going to sharpen your CSS
skills by practicing the fundamentals of

4
00:00:09,940 --> 00:00:11,610
the CSS box model.

5
00:00:11,610 --> 00:00:14,830
You've learned that the box model
is the basis of CSS layout.

6
00:00:14,830 --> 00:00:17,080
It determines how elements
are displayed and

7
00:00:17,080 --> 00:00:19,320
the amount of space they
take up on the page.

8
00:00:19,320 --> 00:00:20,590
So in this practice workshop,

9
00:00:20,590 --> 00:00:23,347
you will work with the main
components of the box model.

10
00:00:23,347 --> 00:00:27,600
You're going to create this
scrolling box component with CSS.

11
00:00:27,600 --> 00:00:29,760
To get started,
launch the workspace with this video.

12
00:00:31,406 --> 00:00:36,265
First, click to open the image box.png
to view the box model representation of

13
00:00:36,265 --> 00:00:39,100
the component you're going to create.

14
00:00:39,100 --> 00:00:42,570
Remember, each component on
the page is like a rectangular box.

15
00:00:42,570 --> 00:00:45,340
It has dimensions and
takes up a certain amount of space.

16
00:00:45,340 --> 00:00:49,840
So in this box,
the content area is 556 by 256,

17
00:00:49,840 --> 00:00:54,945
the padding area is 20 on each side,
the border area is 2.

18
00:00:54,945 --> 00:00:59,170
And the margins are equal on
both the left and right sides.

19
00:00:59,170 --> 00:01:00,630
You're going to recreate this.

20
00:01:00,630 --> 00:01:03,020
So now let's walk through
what you'll need to do.

21
00:01:03,020 --> 00:01:07,580
In the file box-model.css,
there are six comments with instructions

22
00:01:07,580 --> 00:01:11,330
on the box model properties you'll
need to write inside the box rule.

23
00:01:11,330 --> 00:01:18,690
So first, you'll give box a fluid width
of 90% and a height of 300 pixels.

24
00:01:18,690 --> 00:01:23,528
But the width should never
be wider than 600 pixels.

25
00:01:23,528 --> 00:01:28,390
Then, you will apply 20 pixels of
padding on all four sides of .box.

26
00:01:28,390 --> 00:01:32,664
After that, apply a 2-pixel solid
border on each side of .box, and

27
00:01:32,664 --> 00:01:36,260
you can set the border color
to any color you'd like.

28
00:01:36,260 --> 00:01:39,180
And right below,
you'll need to use margins to

29
00:01:39,180 --> 00:01:42,410
horizontally center align
the .box component on the page.

30
00:01:42,410 --> 00:01:48,150
Now, at this point, you may notice that
since you set .box's height to 300 pixels,

31
00:01:48,150 --> 00:01:50,580
the text inside it is overflowing.

32
00:01:50,580 --> 00:01:54,690
So you'll need to use the property that
prevents the contents of .box from

33
00:01:54,690 --> 00:02:00,790
overflowing and the value that displays a
scroll bar if and when content overflows.

34
00:02:00,790 --> 00:02:04,240
When you get to this part of
the challenge, if you inspect the .box

35
00:02:04,240 --> 00:02:08,510
component using your browser's developer
tools, I'm using Chrome DevTools.

36
00:02:08,510 --> 00:02:12,350
You'll notice that the width of
.box is going to be 644 pixels, and

37
00:02:12,350 --> 00:02:14,660
the height 344 pixels.

38
00:02:14,660 --> 00:02:18,020
Well, remember, the height should
be exactly 300 pixels, and

39
00:02:18,020 --> 00:02:20,150
the width no wider than 600 pixels.

40
00:02:20,150 --> 00:02:24,890
So here, the browser is applying
an additional 44 pixels to the total width

41
00:02:24,890 --> 00:02:26,600
and the total height of .box.

42
00:02:26,600 --> 00:02:27,200
Why?

43
00:02:27,200 --> 00:02:30,510
Well, it's creating that extra
space because of the padding and

44
00:02:30,510 --> 00:02:32,490
border width values you applied to it.

45
00:02:32,490 --> 00:02:34,130
This can cause problems in your layout.

46
00:02:34,130 --> 00:02:34,790
So, for example,

47
00:02:34,790 --> 00:02:38,290
you may have columns that need to be
exactly the width you've defined.

48
00:02:38,290 --> 00:02:41,900
Otherwise, your column layout might break
and they won't line up side by side.

49
00:02:41,900 --> 00:02:45,915
So instead of manually subtracting
44 pixels from the width and

50
00:02:45,915 --> 00:02:50,265
height values of .box, CSS has a feature
that automatically does it for you.

51
00:02:50,265 --> 00:02:54,905
It alters the default CSS box model
by including any border width and

52
00:02:54,905 --> 00:02:57,890
padding values into the total width and
height of a box.

53
00:02:57,890 --> 00:03:02,400
Now, this step is optional, because you
may have not learned about this yet.

54
00:03:02,400 --> 00:03:05,360
But if you wanna give it a try,
I've posted resources that can help you

55
00:03:05,360 --> 00:03:07,335
solve this part of the challenge
in the teacher's notes.

56
00:03:07,335 --> 00:03:12,070
So here, you'll need to include a property
and value that forces the border width and

57
00:03:12,070 --> 00:03:16,080
padding values into the total width and
height of .box.

58
00:03:16,080 --> 00:03:20,410
The goal of this practice session is to
get the CSS box model of the box element

59
00:03:20,410 --> 00:03:24,160
to match the diagram shown in box.png.

60
00:03:24,160 --> 00:03:27,880
You can even see a live box
model view of the element

61
00:03:27,880 --> 00:03:30,250
when you inspect it in your
browser's development tools.

62
00:03:31,910 --> 00:03:35,480
When you're finished,
your page should look similar to this.

63
00:03:35,480 --> 00:03:37,700
This is a great way to practice
what you've learned so

64
00:03:37,700 --> 00:03:39,600
far about the CSS box model.

65
00:03:39,600 --> 00:03:43,060
Good luck, have fun, and in the next
video, I'll walk you through the solution.