Styling the Footer10:55 with Mattox Shuler
As 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
You need to sign up for Treehouse in order to download course files.Sign up