Hey again and welcome back.

We just styled the header of our CSS Zen Garden.

And now we want to jump into typesetting some of our body text in a one and

two-column layout.

We've got our line height, vertical rhythm and

sizes down, so this shouldn't be too much of a chore.

From our concept sketches, I want our preamble, benefits, and

requirements sections to be one column.

And our explanation and participation sections to be two column.

We see our benefits are set up as a small aside for larger size screens.

But we want to style them in our basic format for smaller sizes.

Then, through media queries, adjust it for larger.

[BLANK_AUDIO]

We'll start by setting up our one column layouts.

Using Trent Walton's technique,

I've placed asterisks at the 45th and 75th characters into our HTML.

Remember, we'll be removing these later, so

that's okay to put them in now as these are gonna help us determine our measure.

Our line should break somewhere between the two.

For these sections,

I'm gonna wanna set em apart through different background changes.

So, lets head over to our CSS.

So for our preamble and

requirements, I want to set our background to be that navy tone we've been using.

[BLANK_AUDIO]

And I'll also wanna give it some padding of 4M for the top and bottom and 6% for

the left and right, as this is gonna give our content good space within the block.

For our benefits, I wanna do a similar set up, but

I wanna give it an even darker shade of our navy for the background.

[BLANK_AUDIO]

So I'll save and let's go check that out.

Great. So

our backgrounds are definitely setting apart these sections, but

our type inside them now needs some help.

We can't even see our body copy.

So let's go in and

set that at a sandy tone of white and let's also setup our measure.

So I head over here.

And notice how I'm selecting the H3's and P's of our preamble and requirements.

Because our HTML cannot change and we can't add another div or class into

the mix, we'll need to use these classes and elements to set our measure.

I felt like a max width of 34 rim felt like a good reading measure and

is just at the cusp of the 75th character mark.

We'll also need to set our margins to 0 auto to keep our content block in

the middle of the page.

And for our H3, we'll give it a bottom margin of .62m to keep it in line with

the rhythm that we set up.

Now, I'll copy this and paste it into our P tags.

And remove that .62m of bottom margin as it's no longer necessary.

And then I'll also set it's color to be our white.

Let's save and check out how that's looking.

All right.

That's much better.

Our measure is in a much more readable place.

And notice the two asterisks are on two different lines.

So that's good.

And our benefits down here still need some help.

So let's go style those out.

We'll want to set our H3s up in a similar way.

So I'll grab that copy and paste it down here for our benefits H3.

But let's change the color of it to be our lighter shade of gray.

[BLANK_AUDIO]

Let's set our paragraphs of our benefits section to be the same as these.

But we're gonna want to change the color.

So I'll paste that in there.

And then our color will be a tad darker shade of that gray.

So we'll do 606f81.

This'll make our H3 stand out just a bit more.

So let's check that out.

Great. That's much better, and

it has a nice feel and contrast with the background.

Now in our requirements section,

things are styled in a similar way to our preamble.

But notice now, our links need some tender loving care.

So let's fix those.

So for our requirements class link style, I'll set the color to be the same white as

the copy and give it a border bottom of one pixel solid with the same color.

[SOUND] When these are hovered over, I want them to turn green.

So on our hover selector, we'll set a color of green and border of green.

[SOUND]

Let's save and refresh.

So great.

That's much better.

They actually look like links because they have a border bottom here, and

they're hover state is nice.

And notice how building a good foundation in the first video made this

process a whole lot easier for our one column layouts.

Now, we'll be getting into the two column layout area of our design.

After our preamble,

we see from our sketch that we want our content to split into two columns.

It would be great here if our backgrounds also differed,

which would further distinguish each content block.

Again, our vertical rhythm, margins, and line height are already set, so

this should be pretty straightforward.

These content blocks are similar lengths.

So it can work well to place them side by side.

If they were longer pieces of content or if just one was longer,

then it wouldn't make sense as the reader would have to scroll through one,

then scroll back up to read the other.

Notice how asterisks have been placed at the 40th and

50th characters to help us with our measure for a multiple column layout.

To style these out, let's head over to our CSS and we'll target our explanation and

participation classes.

We'll set a width of 50%, so that each class takes up half of the browser.

And I'll set our box-sizing to border-box, so

that when we adjust padding, it won't adjust our width past the 100% mark.

On my explanation class, I'll give it a float of left.

And padding of 4m for the top.

10% for the right.

4m for the bottom.

And 8% for the left.

This will float or position our content block to the left and

space our content well within the block through our padding.

Notice how our top and bottom padding are consistent with our other sections of 4m.

For this explanation section, I'll keep the background and

text the same colors as our body

[BLANK_AUDIO]

We're gonna wanna change that to be white.

So I'll go up here and grab a sample of our white, and

head down to our participation H3 and paste that in.

[BLANK_AUDIO]

Let's save and refresh.

[BLANK_AUDIO]

All right.

Things are looking really nice here.

So the div's, they're aligning well.

And our measure is good because the asterisks are falling on two

different lines.

These asterisks are here to help us make decisions, not make decisions for us.

If we felt like the measure needed to be adjusted, then we should adjust it.

Lastly, notice our links and

our participation section could use some nice styling.

So let's go help them out.

[BLANK_AUDIO]

Now let's check it out.

Great. That's looking a whole lot better and

jives more with the content.

Lastly, notice this HTML and CSS are still in all caps,

because they're set in links and they don't have ABBR tags around them.

We can actually use some code to target those two links and

change them to be small caps.

So let's check out how.

I'm gonna grab our small-caps copy up here.

And then down here for our links,

notice I'm using these pseudo-selectors to select our last paragraph.

And then our first link in the last paragraph.

And our second link in the last paragraph.

These correspond to the HTML and CSS links in that last paragraph.

So I'll set these to be small caps with a text transform of lower case.

Let's save and check it out now.

Great. So now those links are styled in

our small caps.

This was just a minor touch.

But I think it really helps style the content.

Great. Our content is really starting to

flow well.

And through color and arrangement, we're clearly presenting these

different blocks of text in one and two column layouts.

Next, we're gonna take a look at our footer.