Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice CSS Length Units!
You have completed Practice CSS Length Units!
Preview
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