All right, so our basic typography is in place.

This will give us a foundation to build off of as we arrange content

through hierarchy.

Our content needs some serious corrections to its measure and space.

But we'll deal with that as we go because each section will be handled differently.

The first section we want to look at is our header.

This is the area of HTML that's under the header tag.

So, we're looking at how to style out the words, CSS Zen Garden, and

the beauty of CSS design.

From our sketch, I've concepted this section to include some big type for

a title, with a subtitle beneath it, at a smaller size.

I want the background to span all around this section to the edges of the browser.

So when you hit the page,

you're not engaging a lot of different things at once.

You're only soaking this in.

All right.

So this is where we left off on our current web page.

I'm going to want to start styling out our header through our CSS.

First I want all our headings to have a font color of green.

So I head down here and add this end.

And change this to color.

We'll save and check that out.

All right, it's a little intense in places, so

we're gonna change that around but it's starting to look good.

And down in our header,

we're gonna now give it some space by now adding some padding of 10 M and 4 percent.

And then give it a text align of center.

Let's check that out.

Great. So, now our text has ample space above and

around it, and you can engage it as it's own element on the page.

Now I wanna start styling out our h1.

So I want it to be a lot bigger and bolder.

To start I'll go to font size of 6.2m.

And a font weight of 900.

Let's see what that looks like.

All right, it is definitely big and bold.

I'm not a fan of the green color for it here, so

I'm actually gonna change it back to our text color.

So I'll grab that.

And paste it into our h1.

And I also felt like the margin on the bottom could just be flat, so

let's give it zero.

Let me check that out now.

Great. So this is much nicer, and

I like the spacing a lot better, where our H2 is snug up underneath our H1 there.

So, I want my H2 here,

which is our tagline, to be a bit different than what it is right now.

I think it would look really nice if it was the sans version of Allegrea,

and all caps with some letter spacing and so forth.

So let's style that out.

Over here I'm gonna grab our font family, and paste it into our h2.

And I don't need the small caps version, so I'm gonna remove that.

And then I felt like the font size was a little big, so

we'll set it at our next size down in our scale, which is 1.777m.

And it's also set the letter spacing to be .3m, just to give it some breathing room.

And lastly, let's set our text transform to be uppercase.

Let's see how that looks.

So, that's looking good, but

I feel like you could just use a font style of normal instead of italic.

Now, let's check it out.

Great.

So, we're almost there, but

notice how the small caps in this uppercase setting don't really jive well.

So, let's go in and

fix that by targeting the header abbr to have the text transformed of uppercase.

[BLANK_AUDIO]

Great.

So, that fixed that issue there.

Now let's jump into our summary section.

From our sketch, I've concepted it out to be it's own little area.

Centered so it feels tied to our header.

But we can distinguish it thru changes in background color, the size of the type,

and the font style.

So, I'm gonna head back into our CSS.

And I'm gonna first copy these two colors, as I want our summary background to be

green, and our color to be white, so we'll set that up.

[BLANK_AUDIO]

We also want it to have a text-align of center.

And this class is gonna need some space around it, so let's give it

some padding of 1.5 for the top and bottom, and 6% for the left and right.

Let's check that out.

All right, it's getting there.

Obviously our link color will need to change a bit.

And I actually wanna increase this font size to accent that summary more.

Let's head over to our CSS, and I'm targeting our summary p element.

And let's increase it to the next size in our typographic scale, which is

1.333m from http://www.typescale.com, and let's check that out.

That's much better, but notice here we need to adjust our measure,

as we don't want this to span the whole width of the browser, and

it just feels a little clumsy.

So to fix that I'm gonna set a max width of 44m.

And give it a margin of zero auto so

that content block is now in the middle of the page.

All right, that's getting there but

our line height here feels a little too spacious.

So I'm gonna set that at 1.4 instead of the 1.6 that it was at.

And let's give this a font style of italics, so

that it feels a little different from our text.

All right. So that's looking a whole lot better.

But I still feel like we could do something to the last line of

this paragraph.

And we definitely need to change the link colors there.

So let's head over to our CSS.

And we're gonna target that paragraph by doing summary p + p,

because [SOUND] it's the second paragraph in our summary class.

So I'm gonna add some code real quick to style it out and explain what it does.

So what this code is doing is it's removing any text indent that we had

put on it so it'll correctly align to the center.

We're gonna give it a font size of normal,

because it pairs well with the italic going on there.

And then I'm gonna decrease the font size so this paragraph is less accented.

Then we'll set the top margin to 0.2 em, which will give it even spacing, and

lastly, I've set its color to be dark green.

Let save and check it out.

All right, I really like how this calls out this portion in the summary to

be really important, and then the second portion to be a little less important, but

we still need to fix these links here.

I think they would look good as small caps with a small border,

with the same color as the text at first.

But when they're hovered over, they'll change to our sandy white.

Let's go set that up.

[BLANK_AUDIO]

So I'll save and refresh the page.

This is looking really nice.

These links are able to be noticed through their bottom border and

hover state change.

Our header as a whole has really come together and

taken shape, and it immerses the reader immediately in the content and colors.

We'll get into reponsively adjusting all these later,

because we first wanna set up our body copy responsively.

Changes to our body copy's font size will affect all our headings, so

it's smart to do that first, and

then adjust from there as needed at the different break point sizes.

Next we'll get into building out our one column and two column layouts.