We can also define number values more fluidly with percentage units,

because percentages by nature are always relative to something else.

[SOUND] When we use a percentage unit in CSS,

[SOUND] the percentage value is measured relative to a parent element's length.

So, it adjusts based on the parent element.

Many properties like width, margin, and

padding use percentages, and they're commonly used for

layout since they allow fluid sizing of elements relative to their container.

So, for example, if we go back to our work space, and in our CSS file.

If we change our main header elements width value to 50%.

When we save our style sheet and take a look at it in the browser,

notice how the header takes up half the browser's window width.

And if we resize the browser window,

notice how the header width adjusts according to the browser window's width.

And if we go back to our main-header rule, and give it a left margin and percentages,

so let's say margin-left, and we'll set the value to 10%.

When we save our style sheet and take a look at it again.

Notice the left margin gap that's taking up 10% of the full browser width.

But in our case, moving forward, we still want the main header width to

take up 100% of the browser width, and the left margin to be 0% or 0.

So we can actually go back and omit these properties for now.

But we're gonna revisit them later in the next stage on layout.

But what we will do is resize our primary content and secondary content divs with

a percentage, since we don't want them to span the width of the full browser.

That makes the content a little too difficult to read since it's so wide.

So first, to target both elements with one rule,

we're able to group multiple selectors, we just need to separate them with a comma.

So to select both the primary content and

secondary content classes, we'll write the primary-content class first.

Followed by a comma and a space.

Then right after that, we can target the secondary-content class.

[BLANK_AUDIO]

And I'm actually gonna bring the secondary-content class

below the primary-content class, just to keep things a little more readable.

And now, in the declaration block,

we're going to add a width property, and set the value to 60%.

So now let's go ahead and save our style sheet, and bring up the browser preview.

And when we refresh the page,

you can see that the main content areas now take up 60% of the browser width.

Finally, we can also use percentages for font sizes,

where the size of the text is directly related to the font size of its parent.

For instance, if we go back to our style sheet, and

if we target all paragraphs on the page with the p element selector.

Then set the font-size to 150 pixels.

The font size of all paragraphs should now be 1.5

times larger than the default body text of 16 pixels.

So when we save our style sheet and take a look at again in the browser.

We can see how every paragraph's text size increase to a font

size equivalent to 24 pixels.

And if we go back to our style sheet and remove the font-size declaration from

the paragraph rule, I'm actually gonna get rid of the entire rule.

Then scroll up and apply it to the body element instead.

When we save and take a look at it again in the browser,

now all the text in the body's descendant elements increase in size.

All except for

those elements that have fixed pixel based font sizes, like our headings.

So again, percentages are a really flexible unit for

creating scalable content, and we'll see more of them in the next stage,

where we'll shape the actual layout of our page.

Next, we're gonna learn about a relative unit that's more suitable for font sizing.