Header and Summary

All right, so our basic typography is in place. 0:00 This will give us a foundation to build off of as we arrange content 0:03 through hierarchy. 0:06 Our content needs some serious corrections to its measure and space. 0:08 But we'll deal with that as we go because each section will be handled differently. 0:12 The first section we want to look at is our header. 0:16 This is the area of HTML that's under the header tag. 0:19 So, we're looking at how to style out the words, CSS Zen Garden, and 0:22 the beauty of CSS design. 0:25 From our sketch, I've concepted this section to include some big type for 0:27 a title, with a subtitle beneath it, at a smaller size. 0:31 I want the background to span all around this section to the edges of the browser. 0:35 So when you hit the page, 0:38 you're not engaging a lot of different things at once. 0:40 You're only soaking this in. 0:42 All right. 0:44 So this is where we left off on our current web page. 0:45 I'm going to want to start styling out our header through our CSS. 0:47 First I want all our headings to have a font color of green. 0:51 So I head down here and add this end. 0:56 And change this to color. 1:00 We'll save and check that out. 1:03 All right, it's a little intense in places, so 1:05 we're gonna change that around but it's starting to look good. 1:08 And down in our header, 1:10 we're gonna now give it some space by now adding some padding of 10 M and 4 percent. 1:12 And then give it a text align of center. 1:19 Let's check that out. 1:21 Great. So, now our text has ample space above and 1:26 around it, and you can engage it as it's own element on the page. 1:29 Now I wanna start styling out our h1. 1:35 So I want it to be a lot bigger and bolder. 1:36 To start I'll go to font size of 6.2m. 1:40 And a font weight of 900. 1:46 Let's see what that looks like. 1:49 All right, it is definitely big and bold. 1:53 I'm not a fan of the green color for it here, so 1:55 I'm actually gonna change it back to our text color. 1:58 So I'll grab that. 2:01 And paste it into our h1. 2:05 And I also felt like the margin on the bottom could just be flat, so 2:06 let's give it zero. 2:11 Let me check that out now. 2:13 Great. So this is much nicer, and 2:14 I like the spacing a lot better, where our H2 is snug up underneath our H1 there. 2:16 So, I want my H2 here, 2:22 which is our tagline, to be a bit different than what it is right now. 2:24 I think it would look really nice if it was the sans version of Allegrea, 2:27 and all caps with some letter spacing and so forth. 2:31 So let's style that out. 2:34 Over here I'm gonna grab our font family, and paste it into our h2. 2:36 And I don't need the small caps version, so I'm gonna remove that. 2:40 And then I felt like the font size was a little big, so 2:45 we'll set it at our next size down in our scale, which is 1.777m. 2:48 And it's also set the letter spacing to be .3m, just to give it some breathing room. 2:54 And lastly, let's set our text transform to be uppercase. 2:59 Let's see how that looks. 3:05 So, that's looking good, but 3:08 I feel like you could just use a font style of normal instead of italic. 3:09 Now, let's check it out. 3:14 Great. 3:16 So, we're almost there, but 3:16 notice how the small caps in this uppercase setting don't really jive well. 3:17 So, let's go in and 3:22 fix that by targeting the header abbr to have the text transformed of uppercase. 3:24 [BLANK_AUDIO] 3:28 Great. 3:33 So, that fixed that issue there. 3:34 Now let's jump into our summary section. 3:36 From our sketch, I've concepted it out to be it's own little area. 3:39 Centered so it feels tied to our header. 3:43 But we can distinguish it thru changes in background color, the size of the type, 3:46 and the font style. 3:50 So, I'm gonna head back into our CSS. 3:52 And I'm gonna first copy these two colors, as I want our summary background to be 3:55 green, and our color to be white, so we'll set that up. 3:59 [BLANK_AUDIO] 4:03 We also want it to have a text-align of center. 4:07 And this class is gonna need some space around it, so let's give it 4:12 some padding of 1.5 for the top and bottom, and 6% for the left and right. 4:15 Let's check that out. 4:19 All right, it's getting there. 4:22 Obviously our link color will need to change a bit. 4:24 And I actually wanna increase this font size to accent that summary more. 4:27 Let's head over to our CSS, and I'm targeting our summary p element. 4:31 And let's increase it to the next size in our typographic scale, which is 4:35 1.333m from http://www.typescale.com, and let's check that out. 4:39 That's much better, but notice here we need to adjust our measure, 4:44 as we don't want this to span the whole width of the browser, and 4:47 it just feels a little clumsy. 4:49 So to fix that I'm gonna set a max width of 44m. 4:51 And give it a margin of zero auto so 4:57 that content block is now in the middle of the page. 4:59 All right, that's getting there but 5:02 our line height here feels a little too spacious. 5:04 So I'm gonna set that at 1.4 instead of the 1.6 that it was at. 5:08 And let's give this a font style of italics, so 5:11 that it feels a little different from our text. 5:14 All right. So that's looking a whole lot better. 5:19 But I still feel like we could do something to the last line of 5:22 this paragraph. 5:24 And we definitely need to change the link colors there. 5:25 So let's head over to our CSS. 5:27 And we're gonna target that paragraph by doing summary p + p, 5:28 because [SOUND] it's the second paragraph in our summary class. 5:32 So I'm gonna add some code real quick to style it out and explain what it does. 5:35 So what this code is doing is it's removing any text indent that we had 5:39 put on it so it'll correctly align to the center. 5:43 We're gonna give it a font size of normal, 5:45 because it pairs well with the italic going on there. 5:48 And then I'm gonna decrease the font size so this paragraph is less accented. 5:50 Then we'll set the top margin to 0.2 em, which will give it even spacing, and 5:55 lastly, I've set its color to be dark green. 6:01 Let save and check it out. 6:04 All right, I really like how this calls out this portion in the summary to 6:06 be really important, and then the second portion to be a little less important, but 6:09 we still need to fix these links here. 6:13 I think they would look good as small caps with a small border, 6:16 with the same color as the text at first. 6:19 But when they're hovered over, they'll change to our sandy white. 6:21 Let's go set that up. 6:24 [BLANK_AUDIO] 6:25 So I'll save and refresh the page. 6:59 This is looking really nice. 7:01 These links are able to be noticed through their bottom border and 7:03 hover state change. 7:06 Our header as a whole has really come together and 7:07 taken shape, and it immerses the reader immediately in the content and colors. 7:09 We'll get into reponsively adjusting all these later, 7:15 because we first wanna set up our body copy responsively. 7:18 Changes to our body copy's font size will affect all our headings, so 7:21 it's smart to do that first, and 7:25 then adjust from there as needed at the different break point sizes. 7:27 Next we'll get into building out our one column and two column layouts. 7:31