Introducing the Practice3:44 with Guil Hernandez
See 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
You need to sign up for Treehouse in order to download course files.Sign up