This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
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
In this video, you'll learn how to write the base styles for the navigation and 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
You need to sign up for Treehouse in order to download course files.
Sign up