This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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 can define number values more fluidly with percentage units. Percentages, by nature, are always relative to something else. When we use a percentage unit in CSS, the percentage value is measured relative to a parent element's length.
Update
At the 3:25 mark, Guil types 150% as the font-size value for the paragraphs while saying "150 pixels". The value should be as typed in the video, 150%.
Quick Reference
Using percentages
.main-header {
width: 75%;
}
main-header will take up 75% of the browser window's width.
We can also define number values more
fluidly with percentage units,
0:00
because percentages by nature are always
relative to something else.
0:04
[SOUND] When we use a percentage unit in
CSS,
0:08
[SOUND] the percentage value is measured
relative to a parent element's length.
0:10
So, it adjusts based on the parent
element.
0:15
Many properties like width, margin, and
0:18
padding use percentages, and they're
commonly used for
0:20
layout since they allow fluid sizing of
elements relative to their container.
0:23
So, for example, if we go back to our work
space, and in our CSS file.
0:28
If we change our main header elements
width value to 50%.
0:33
When we save our style sheet and take a
look at it in the browser,
0:38
notice how the header takes up half the
browser's window width.
0:44
And if we resize the browser window,
0:48
notice how the header width adjusts
according to the browser window's width.
0:51
And if we go back to our main-header rule,
and give it a left margin and percentages,
0:57
so let's say margin-left, and we'll set
the value to 10%.
1:03
When we save our style sheet and take a
look at it again.
1:09
Notice the left margin gap that's taking
up 10% of the full browser width.
1:15
But in our case, moving forward, we still
want the main header width to
1:21
take up 100% of the browser width, and the
left margin to be 0% or 0.
1:26
So we can actually go back and omit these
properties for now.
1:31
But we're gonna revisit them later in the
next stage on layout.
1:36
But what we will do is resize our primary
content and secondary content divs with
1:41
a percentage, since we don't want them to
span the width of the full browser.
1:47
That makes the content a little too
difficult to read since it's so wide.
1:51
So first, to target both elements with one
rule,
1:57
we're able to group multiple selectors, we
just need to separate them with a comma.
2:02
So to select both the primary content and
2:07
secondary content classes, we'll write the
primary-content class first.
2:11
Followed by a comma and a space.
2:19
Then right after that, we can target the
secondary-content class.
2:21
[BLANK_AUDIO]
2:26
And I'm actually gonna bring the
secondary-content class
2:33
below the primary-content class, just to
keep things a little more readable.
2:37
And now, in the declaration block,
2:41
we're going to add a width property, and
set the value to 60%.
2:44
So now let's go ahead and save our style
sheet, and bring up the browser preview.
2:49
And when we refresh the page,
2:54
you can see that the main content areas
now take up 60% of the browser width.
2:56
Finally, we can also use percentages for
font sizes,
3:03
where the size of the text is directly
related to the font size of its parent.
3:06
For instance, if we go back to our style
sheet, and
3:11
if we target all paragraphs on the page
with the p element selector.
3:14
Then set the font-size to 150 percent.
3:21
The font size of all paragraphs should now
be 1.5
3:28
times larger than the default body text of
16 pixels.
3:32
So when we save our style sheet and take a
look at again in the browser.
3:36
We can see how every paragraph's text size
increase to a font
3:42
size equivalent to 24 pixels.
3:46
And if we go back to our style sheet and
remove the font-size declaration from
3:49
the paragraph rule, I'm actually gonna get
rid of the entire rule.
3:54
Then scroll up and apply it to the body
element instead.
3:58
When we save and take a look at it again
in the browser,
4:05
now all the text in the body's descendant
elements increase in size.
4:09
All except for
4:13
those elements that have fixed pixel based
font sizes, like our headings.
4:14
So again, percentages are a really
flexible unit for
4:19
creating scalable content, and we'll see
more of them in the next stage,
4:23
where we'll shape the actual layout of our
page.
4:27
Next, we're gonna learn about a relative
unit that's more suitable for font sizing.
4:30
You need to sign up for Treehouse in order to download course files.
Sign up