Creating and Styling the Layout Containers

So how's it going so far? 0:00 Were you able to build parts of the Best City Guide layout? 0:01 Now, I'm going to show you one way you can build this layout. 0:04 If you did things different than I did, that's okay. 0:07 Because there's no 100% correct way of coding this layout. 0:10 In fact, I encourage you do some things differently and 0:13 experiment with the layout styles. 0:16 So the first thing I'm gonna do is create some layout wrappers. 0:18 So in the HTML, 0:21 I'll start by adding a container around the content inside main-header. 0:23 So right below the opening header tag I'll add a div with the class container. 0:28 And then I'll place the new closing div tag right above the closing header tag. 0:38 Then I'll add a container around the three columns. 0:44 So right above the opening div tag for the secondary column, 0:48 I'll add a div and give it the class container. 0:53 Then I'll add the new container closing div tag right 0:59 after the tertiary closing div tag. 1:04 So the containers I just created will center the layout on the page and keep it 1:08 from looking too wide or too narrow, depending on the device or viewport width. 1:13 And I'll add the width and margin styles later. 1:17 So now in style.css I'm going to write the rest of the base styles for the name and 1:20 navigation elements. 1:25 So first, right here in the name rule I'm going to add the margin property and 1:26 set the value to 0. 1:31 This removes the default top and bottom margins from the h1, and 1:33 it also helps prevent that collapsing margin behavior 1:37 you learned about in the first section of this course. 1:40 Next I'll go back to my stylesheet and create a new rule that targets main-nav 1:43 and I'm going to set its top margin value to 5 pixels. 1:49 This gives main-nav a little more separation from the site name above. 1:55 In the rule below main-nav, so right here, I'm going to add a display property and 2:00 set the value to block, then I’ll add a padding property. 2:07 Then I’ll set the top and bottom padding to 10 pixels, and the left and 2:12 right padding values to 15 pixels. 2:16 This makes the name and navigation link hover targets taller and wider. 2:19 So that the links are easier to click with a mouse and 2:24 easier to tap on touchscreen devices. 2:25 Next I'm going to write the base styles for layout containers like the main 2:28 header, the banner, footer and the content columns. 2:32 So back in my stylesheet, right under the Layout Containers comment, 2:36 I'm going to create a new rule that targets main-header, and 2:41 I'm going to define top and bottom padding. 2:45 So I'll say, padding-top, I'll give it a value of 0.5em and 2:48 I'll set the bottom padding to 0.5em as well. 2:54 Right below, I'll create a new rule that targets the banner class and main-footer. 2:59 Then I'm going to say text-align: center. 3:09 So this will center align the content and 3:13 the banner element and down below in the footer. 3:17 So it looks like the large banner div here needs top and 3:22 bottom padding to create some white space around the content inside. 3:27 Back in my stylesheet, 3:31 again, under the layout containers, I'll go into my banner rule. 3:33 And I'm going to add a padding property and I'll set the top and 3:37 bottom padding value to 3.2em and the left and right padding value to 0. 3:41 Then I'll give it a bottom margin. 3:47 So I'll say margin bottom 60 pixels. 3:49 The bottom margin will add some nice separation between the banner div and 3:53 the content columns below it. 3:58 Next, I'll create small gutters between each column in my layout 4:02 using padding values. 4:06 So back in my layout container styles, right under the banner rule, 4:08 I'll create a new rule that targets the class call. 4:13 Then I'll add a padding-right property and set it's value to 1em and 4:18 then I'll create a padding-left value and also set it's value to one 1em. 4:22 The padding values make the content easier and 4:29 more pleasant to read because the text isn't up against the edge of the columns. 4:32 So next in the page element section of my stylesheet, 4:41 I'm going to target the h1 inside the banner here, so it has the class headline. 4:45 So back in mystyle sheet, I'll create a new rule that targets headline. 4:52 And then I'm going to set its bottom-margin to 0. 4:57 I'm doing this because I think there's a little too much space 5:03 between the headline and the tagline below it. 5:06 So once I refresh the page we can see that it looks a little better. 5:09 There's not as much space between the two elements. 5:13 Okay, so in the next video, I'll begin showing you how I style the layout for 5:16 large screens using media queries. 5:20