Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We’ll see how to set up one and two column layouts for our Preamble, Benefits, and Requirements section.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey again and welcome back.
0:00
We just styled the header of our CSS Zen
Garden.
0:02
And now we want to jump into typesetting
some of our body text in a one and
0:05
two-column layout.
0:09
We've got our line height, vertical rhythm
and
0:10
sizes down, so this shouldn't be too much
of a chore.
0:13
From our concept sketches, I want our
preamble, benefits, and
0:16
requirements sections to be one column.
0:20
And our explanation and participation
sections to be two column.
0:23
We see our benefits are set up as a small
aside for larger size screens.
0:27
But we want to style them in our basic
format for smaller sizes.
0:31
Then, through media queries, adjust it for
larger.
0:35
[BLANK_AUDIO]
0:37
We'll start by setting up our one column
layouts.
0:39
Using Trent Walton's technique,
0:42
I've placed asterisks at the 45th and 75th
characters into our HTML.
0:43
Remember, we'll be removing these later,
so
0:49
that's okay to put them in now as these
are gonna help us determine our measure.
0:52
Our line should break somewhere between
the two.
0:56
For these sections,
0:58
I'm gonna wanna set em apart through
different background changes.
1:00
So, lets head over to our CSS.
1:04
So for our preamble and
1:06
requirements, I want to set our background
to be that navy tone we've been using.
1:07
[BLANK_AUDIO]
1:11
And I'll also wanna give it some padding
of 4M for the top and bottom and 6% for
1:14
the left and right, as this is gonna give
our content good space within the block.
1:18
For our benefits, I wanna do a similar set
up, but
1:23
I wanna give it an even darker shade of
our navy for the background.
1:26
[BLANK_AUDIO]
1:29
So I'll save and let's go check that out.
1:36
Great.
So
1:39
our backgrounds are definitely setting
apart these sections, but
1:39
our type inside them now needs some help.
1:43
We can't even see our body copy.
1:45
So let's go in and
1:47
set that at a sandy tone of white and
let's also setup our measure.
1:48
So I head over here.
1:52
And notice how I'm selecting the H3's and
P's of our preamble and requirements.
1:54
Because our HTML cannot change and we
can't add another div or class into
1:59
the mix, we'll need to use these classes
and elements to set our measure.
2:03
I felt like a max width of 34 rim felt
like a good reading measure and
2:08
is just at the cusp of the 75th character
mark.
2:12
We'll also need to set our margins to 0
auto to keep our content block in
2:15
the middle of the page.
2:19
And for our H3, we'll give it a bottom
margin of .62m to keep it in line with
2:21
the rhythm that we set up.
2:25
Now, I'll copy this and paste it into our
P tags.
2:26
And remove that .62m of bottom margin as
it's no longer necessary.
2:30
And then I'll also set it's color to be
our white.
2:35
Let's save and check out how that's
looking.
2:39
All right.
2:42
That's much better.
2:42
Our measure is in a much more readable
place.
2:43
And notice the two asterisks are on two
different lines.
2:46
So that's good.
2:49
And our benefits down here still need some
help.
2:50
So let's go style those out.
2:53
We'll want to set our H3s up in a similar
way.
2:55
So I'll grab that copy and paste it down
here for our benefits H3.
2:58
But let's change the color of it to be our
lighter shade of gray.
3:03
[BLANK_AUDIO]
3:06
Let's set our paragraphs of our benefits
section to be the same as these.
3:08
But we're gonna want to change the color.
3:13
So I'll paste that in there.
3:15
And then our color will be a tad darker
shade of that gray.
3:16
So we'll do 606f81.
3:20
This'll make our H3 stand out just a bit
more.
3:23
So let's check that out.
3:26
Great.
That's much better, and
3:28
it has a nice feel and contrast with the
background.
3:29
Now in our requirements section,
3:33
things are styled in a similar way to our
preamble.
3:34
But notice now, our links need some tender
loving care.
3:37
So let's fix those.
3:40
So for our requirements class link style,
I'll set the color to be the same white as
3:42
the copy and give it a border bottom of
one pixel solid with the same color.
3:47
[SOUND] When these are hovered over, I
want them to turn green.
3:51
So on our hover selector, we'll set a
color of green and border of green.
3:59
[SOUND]
4:03
Let's save and refresh.
4:05
So great.
4:14
That's much better.
4:15
They actually look like links because they
have a border bottom here, and
4:16
they're hover state is nice.
4:19
And notice how building a good foundation
in the first video made this
4:21
process a whole lot easier for our one
column layouts.
4:25
Now, we'll be getting into the two column
layout area of our design.
4:29
After our preamble,
4:33
we see from our sketch that we want our
content to split into two columns.
4:34
It would be great here if our backgrounds
also differed,
4:38
which would further distinguish each
content block.
4:41
Again, our vertical rhythm, margins, and
line height are already set, so
4:44
this should be pretty straightforward.
4:49
These content blocks are similar lengths.
4:52
So it can work well to place them side by
side.
4:54
If they were longer pieces of content or
if just one was longer,
4:58
then it wouldn't make sense as the reader
would have to scroll through one,
5:02
then scroll back up to read the other.
5:05
Notice how asterisks have been placed at
the 40th and
5:08
50th characters to help us with our
measure for a multiple column layout.
5:12
To style these out, let's head over to our
CSS and we'll target our explanation and
5:17
participation classes.
5:21
We'll set a width of 50%, so that each
class takes up half of the browser.
5:23
And I'll set our box-sizing to border-box,
so
5:27
that when we adjust padding, it won't
adjust our width past the 100% mark.
5:30
On my explanation class, I'll give it a
float of left.
5:36
And padding of 4m for the top.
5:42
10% for the right.
5:44
4m for the bottom.
5:45
And 8% for the left.
5:47
This will float or position our content
block to the left and
5:49
space our content well within the block
through our padding.
5:52
Notice how our top and bottom padding are
consistent with our other sections of 4m.
5:56
For this explanation section, I'll keep
the background and
6:00
text the same colors as our body
6:04
[BLANK_AUDIO]
6:06
We're gonna wanna change that to be white.
6:35
So I'll go up here and grab a sample of
our white, and
6:37
head down to our participation H3 and
paste that in.
6:41
[BLANK_AUDIO]
6:45
Let's save and refresh.
7:01
[BLANK_AUDIO]
7:03
All right.
7:05
Things are looking really nice here.
7:06
So the div's, they're aligning well.
7:07
And our measure is good because the
asterisks are falling on two
7:09
different lines.
7:12
These asterisks are here to help us make
decisions, not make decisions for us.
7:14
If we felt like the measure needed to be
adjusted, then we should adjust it.
7:18
Lastly, notice our links and
7:23
our participation section could use some
nice styling.
7:25
So let's go help them out.
7:28
[BLANK_AUDIO]
7:29
Now let's check it out.
8:05
Great.
That's looking a whole lot better and
8:07
jives more with the content.
8:09
Lastly, notice this HTML and CSS are still
in all caps,
8:12
because they're set in links and they
don't have ABBR tags around them.
8:16
We can actually use some code to target
those two links and
8:21
change them to be small caps.
8:24
So let's check out how.
8:26
I'm gonna grab our small-caps copy up
here.
8:28
And then down here for our links,
8:32
notice I'm using these pseudo-selectors to
select our last paragraph.
8:34
And then our first link in the last
paragraph.
8:38
And our second link in the last paragraph.
8:41
These correspond to the HTML and CSS links
in that last paragraph.
8:44
So I'll set these to be small caps with a
text transform of lower case.
8:48
Let's save and check it out now.
8:53
Great.
So now those links are styled in
8:55
our small caps.
8:57
This was just a minor touch.
8:58
But I think it really helps style the
content.
8:59
Great.
Our content is really starting to
9:02
flow well.
9:04
And through color and arrangement, we're
clearly presenting these
9:05
different blocks of text in one and two
column layouts.
9:08
Next, we're gonna take a look at our
footer.
9:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up