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
Welcome back. How did you do? Let’s go over how I solved this challenge.
Resources
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
Welcome back.
How did you do?
0:00
Let's go over how
I solved this challenge.
0:03
I'll start by increasing the font
size of the HTML element.
0:06
The instructions specify using a relative
measurement, and that makes sense,
0:10
since an absolute measurement could
actually override the user's preferred
0:15
browser settings, making
your layout less accessible.
0:20
You'll note that I used ems here.
0:24
But if you solve this using rems, or
even 125%, you'll get the same result.
0:26
On the body element,
0:32
you were asked to use a relative
measurement to increase the line-height.
0:34
This is good practice as the default
space between lines of text is
0:39
too tight for optimum legibility.
0:43
If you specified a measurement here,
like percentages ems or rems, that's fine.
0:50
But unitless line-heights
are preferred based on the way child
0:56
elements inherit line-height values.
1:00
I've included a CSS Tricks article
on line-height if you need a refresher.
1:03
Next up, you were asked to make quite
a number of changes to the main element.
1:09
First, I'll set the width of
the main element to 80% and
1:14
the max-width to 1000 pixels.
1:19
Don't forget to save your workspace, and
I'm going to test this out in the browser.
1:26
You'll see that the width of my main
element is either 80% of the width
1:32
of the page body, or 1000 pixels,
whichever is smaller.
1:37
I'd like that main element to
be centered on the screen, so
1:43
we set the margin to 0 auto.
1:47
That's 0 on the top and
bottom and auto on the sides.
1:49
We've also used the vh or
viewport height element to make our
1:53
main element at least 100% of
the height of the viewport.
1:57
Now, you might be wondering
why that could be helpful.
2:02
I'll demonstrate by commenting out a bit
of my HTML to make my article shorter.
2:05
Note that on a large screen,
2:21
my main element is 100% of
the height of the browser.
2:23
That actually used to be really
hard to accomplish before CSS
2:27
viewport units were introduced.
2:31
Now I'll try shrinking my
browser down to mobile size.
2:34
And you can see now my page
requires vertical scrolling.
2:38
But since I used min-height,
2:42
my main element is allowed to grow
taller along with my page content.
2:44
Now I'll finish up the look of my main
element by including padding and a border.
2:51
Hopefully you remembered the
shorthand for applying padding.
3:08
That's 3% on the top, 6% on the right,
9% on the bottom, and 6% on the left.
3:13
Since we used percentages,
our padding will be relative.
3:19
Note when I preview that the top and
3:24
bottom padding change based on
the width of the parent element,
3:26
not the height, which is an interesting
quirk of using percentages.
3:31
Next up, I'll make some adjustments to
my section elements and my headings.
3:38
For all these adjustments to the
font size and margin, you were
3:43
asked to make your measurements
relative to the root font size.
3:48
Hopefully you remembered
that's the rem measurement.
3:51
I'll use a unitless measurement
to decrease the line-height
4:20
of my h1, h2,
and h3 headings.
4:24
We make this adjustment because
sometimes headings break onto
4:33
multiple lines, especially on
mobile screens.
4:37
In this case, we don't want to
provide generous spacing
4:40
between lines the way we
do with our paragraphs.
4:44
Finally, let's take a look at
the blockquote and cite elements.
4:48
On the blockquote element,
we'll set the padding to 5%.
4:53
On the margin, the shorthand allows
us to make a declaration consisting
4:58
of only two values, two rem on the
top and bottom, and one rem on
5:04
the left and right. We'll also increase
the font size by using 1.1em.
5:09
Since I used em rather than rem here,
our font size won't refer back
5:16
to the root font size, but will consider
the font size of parent elements.
5:21
That really makes a difference
when we consider our cite element.
5:27
Assuming our root font size is 20 pixels
based on the browser default of 16 pixels,
5:40
the font size of the cite element
is calculated by multiplying
5:47
20 times 1.1 times 0.75,
which equals 16.5 pixels.
5:51
All right. Hopefully
working with
6:01
CSS length units feels a
little more comfortable now.
6:03
If your solution looked a little different
than mine, that's perfectly okay.
6:07
Few development challenges have
only one acceptable solution.
6:11
Keep on practicing, and
I'll see you next time.
6:16
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