Preview
Video Player
00:00
00:00
Styling the Footer
10:55As we near the end of the page, we’ll style our different footer elements through arrangement, space, and color to present the content clearly and cleanly.
All right, we've made it to the end of our
page.
0:00
Now it's time to style out our footer
content.
0:03
As we look at our reference sketch,
0:05
we see I have the last paragraph of
requirements split out and
0:07
centered, the five links spanning across
the page as buttons, and the aside section
0:10
styled out in two column format, where one
takes up 60% and the other takes up 40%.
0:15
Both link lists here are centered.
0:20
First, let's style out this last paragraph
in our requirements section.
0:22
I'll target it through the requirements,
paragraph, last of type selector.
0:28
Since it's a short piece of content,
0:33
I want to break it out of the normal
measure to distinguish it as different.
0:35
So, I'll set a max width of 92%, a
text-align of center,
0:39
and a style of Italic.
0:47
Next, I'll remove our text indent so it
centers correctly.
0:57
Give it some top padding of 4m to space it
evenly between the paragraph above and
1:01
the end of the section and give it a
similar blue color to our benefits copy.
1:06
[BLANK_AUDIO]
1:10
So I'll save and let's go check it out.
1:15
Nice.
1:19
That's looking a lot better and
1:19
feels like a closing element that's ending
our copy and introducing our footer.
1:20
I'm not sure if I like the link style
here,
1:26
as it feels a little clunky in this
context, so let's change it up a bit.
1:28
[BLANK_AUDIO]
1:33
I'll target it again through our
requirements class p, last-of-type a and
1:40
assign our green color to it with a bottom
border of none.
1:45
Then for our hover state I'll copy that
code but
1:49
change its color to be a sandy white with
no border.
1:52
[BLANK_AUDIO]
1:55
Let's save and refresh.
2:00
Great.
That's more like it.
2:03
Although they no longer have the border
they're still obviously links to
2:04
the user because of their color and hover
state change.
2:08
All right, let's move into our footer
links now.
2:12
So, we'll want these five links down here
to span across the whole page, as buttons.
2:16
To do that, we'll want to assign the
background of the footer to be green.
2:21
[BLANK_AUDIO]
2:25
Since we'll be floating these five button
styles to the left,
2:30
I'll throw in a clear fix trick by using
the pseudo selector footer colon after,
2:34
with nothing in our content, a display of
table, and a clear of both.
2:38
Basically, this makes sure our footer's
background extends all the way
2:43
across the screen.
2:46
Next we'll get into styling the links.
2:47
I'll give each one a float of left,
box-sizing border-box.
2:50
A width of 20% which will make them fill
the screen because there's five of them.
2:55
So 5 times 20 is 100%.
2:59
A text line of center.
3:01
A background of our green also.
3:03
[BLANK_AUDIO]
3:05
Padding of 1 em for our top and bottom and
0 for our left and right.
3:12
We'll set the color to be our sandy white
and
3:18
give them some slight letter spacing of
0.05 em.
3:20
[BLANK_AUDIO]
3:23
Let's save and check out what that did.
3:29
So it's getting there but needs a few
tweaks still.
3:32
They don't really feel like buttons, and
3:35
there's no hover state changes to our
buttons.
3:37
So let's go in and refine that.
3:39
So, I'll target every even link through
our footer a nth of type even, and
3:41
set its background to our darker green.
3:46
[BLANK_AUDIO]
3:49
Next I'll change the hover state of our
footer links to be a background of
3:55
our sandy white, and then the text will
turn to a color of green.
3:59
[BLANK_AUDIO]
4:03
Let's save and see what that looks like.
4:16
Great.
4:19
These look more like buttons instead of
just one long bar and when we
4:19
hover over them they feel like buttons as
their background and colors change.
4:23
Finally let's jump into our aside content
down here.
4:27
In our HTML this is located below the
footer and we're going to
4:32
be styling this out for small to mid-sized
screens, so we'll set it up properly here.
4:35
Then through our media queries later we'll
work some magic for larger sizes.
4:41
So we'll head over to our CSS and style
out our aside with a width of 100%.
4:45
[BLANK_AUDIO]
4:51
We'll set our sidebar class to have a
background of dark navy, which is what we
4:55
use for our benefit section, and we'll set
its text color to a lighter blue,
5:00
which will give it a lower amount of
contrast with the background.
5:04
[BLANK_AUDIO]
5:08
Then we'll keep our top and bottom padding
consistent with 4 em and
5:11
set our left to right to 0.
5:15
And finally we'll give it a text-align of
center.
5:17
This sidebar class will span the entire
width of the browser.
5:19
Let's save and just see where we're at now
with it.
5:23
So we see we still have a ways to go to
set up our two columns,
5:25
change some link colors and list items.
5:29
Next we'll get into styling our first
column in this two column layout.
5:32
I'll set our design selection class to
float left with box-sizing border-box
5:35
the width of 60% so it'll take up 60% of
the browser width.
5:40
I want the font style to be italic,
because I want all the instances of
5:45
the word by, to be italic, such as, mid
century by Andrew Lowman.
5:49
Then I'll give it a border-right of 1px
solid, and our lighter blue,
5:55
which is the same as our text color in our
sidebar.
5:59
And this will be a subtle way to
distinguish its spacing in
6:02
relation to the other column.
6:05
Next I'll set our two other classes which
will align to the right side of
6:07
the column to have a display of
inline-block and a width of 40%.
6:11
Notice that this time I didn't set our
columns at both at 50% because our
6:15
content in our left column is a bit longer
per line than the content in the right.
6:20
And the 60, 40 lined up better with our
five footer links at 20% intervals.
6:24
Let's save and see what that looks like.
6:30
Good so it's starting to form, but
6:33
we still have some trouble with these list
item elements here.
6:35
And we'll want some adjustments to our
styles, our sizes, and color changes.
6:39
Although our sidebar titles are set at H3,
I wanna size them down a bit so
6:44
they'll work more as small labels, rather
than big headings.
6:49
We'll go into our H3 here and
6:55
set its font size to 0.75 em which is our
next size down in our scale.
6:56
Their margin at 0, their line height at
1.6.
7:04
[BLANK_AUDIO]
7:08
Their padding at 0.5 em for the top and
bottom, and 4% for the left and
7:11
right for space.
7:15
Lastly here I'll give it our lighter tone
of blue,
7:18
which is different than what we set the
summary class in,
7:21
as this color difference will help set
apart the headings in a slight way.
7:24
Now to style out our links.
7:28
I want our side bar UL to have a padding
of 0, and then for
7:30
our side bar LIs, let's set the list-style
type to none to remove those bullets.
7:33
And then adjust the padding for those to
have top and bottom padding of 0.3em and
7:40
2% for the left and right.
7:44
[BLANK_AUDIO]
7:46
Lets save and check that out.
7:50
[BLANK_AUDIO]
7:51
Alright, our H3s are now working as
labels, our bullets are gone and
7:54
this border here is a nice subtle divider.
7:58
Now let's looking at styling out the
actual links in our list items.
8:01
So for these I'll want these titles to be
small caps as I think it'll give it
8:04
a more official feel for a title.
8:08
And then, for these author names we'll
change up their color and
8:10
just sat them in a regular font style.
8:13
To do that, let's head back into our CSS
and start styling those out.
8:16
So, for these sidebar links I'll grab our
font-family code for our small caps and
8:20
paste that in.
8:25
Then I want their style to be normal
instead of metallic.
8:26
And then for our color, I think the green
would look good here, for
8:32
our dark navy background.
8:34
And we'll set our letter spacing at .06 em
to give it some room to breathe.
8:38
And then, lastly, for our hover state,
we'll just set it at our sandy white.
8:42
Let's check out what that's looking like.
8:48
Nice.
8:51
So that's starting to look good.
8:51
We have our Zen Garden title styled in the
way we want, but
8:52
all other links are now styled this way
too.
8:56
We'll need to use our CSS Selectors to
change the other ones, so
8:59
let's see how to do that.
9:02
Each of these author names is the second,
fourth, sixth, eighth and so
9:04
forth number in that class, so they're all
even.
9:09
We can use the a nth of type even selector
to target those lengths.
9:13
So, I want to set our font-family back to
Alegreya Sans instead of the small caps.
9:19
We'll remove our letter spacing and
finally we'll set its
9:26
color to be our sandy white which will
complement that green well.
9:31
And then for that hover state we're gonna
change it to our darker shade of blue.
9:36
Let's check that out now.
9:42
Great.
9:45
This part of the sidebar has really taken
shape.
9:46
I like how the titles of the Zen Garden
stand out with their green color and
9:49
because they're set in small caps.
9:52
The italicized by is a nice touch and
9:54
the author names are given good attention
through their color.
9:57
We still need to hone in the right side as
its baseline gets
10:01
a little misaligned because of the extra
H3 here and
10:04
the color contrast is a bit too high for
this section.
10:07
So in our CSS I'll adjust the top padding
of our zen-resources class h3
10:11
to 0.92 em, which will help realign the
baselines.
10:16
Then, I'll set its color to be the same as
our sidebar text color,
10:20
which will lower its contrast with the
background,
10:24
focusing the user's attention first on the
left part of the side bar.
10:27
Let's see what that looks like now.
10:31
Nice.
Our color contrast is a lot lower here,
10:33
and the hover state still look good,
10:36
and it aligns well with the left side of
our sidebar.
10:38
Not only does the footer look good now but
the whole page has really taken shape.
10:41
Through typography we've turned a basic
HTML file into
10:46
some hierarchically stylized content that
helps readers digest the whole page.
10:49