So now we're gonna see how we're able to use what we learned in the previous video

to create styles for our main headlines.

Now, we're going to create two headline blocks.

One will be headline primary, and the second one will be headline secondary.

And we're going to define these a little differently than we would for h1 and

heading 2 elements.

We'll see why in just a bit.

Now, since we're also going to create modifiers, for our headlines.

Let's first write place holder or selectors for the shared base styles.

So we'll go over to the extends.scss partial and

under the headlines comment we'll create our first place holder selector and

we're going to call it headline prim, or primary.

And right below, we'll create our second one for headline secondary.

So, we'll call this headline-sec.

So, what I'll do next is copy the base styles from our h1s and h2s.

So first, I'll copy all the declarations inside the h1 rule.

And I'll paste them inside the headline primary place holder.

Then I'll go back to base.scss and copy all the declarations from the h2 rule and

this time paste them in the headline secondary place holder rule.

So now I'm just gonna add a few properties.

So, for instance, we're going to give headline primary a margin top of zero.

And we're gonna give headline secondary a letter spacing value.

And I've already created a config for

letter spacing as we can see here in our config partial.

The variable's called letter space.

I'll just go ahead and use this variable as our letter spacing value.

So now, we can style our main headline elements by creating a selector for them.

So, we'll head over to our Headlines.scss partial and first we'll target the class.

Headline, we're again going to take advantage of scss ampersand suffix

feature to define our primary and secondary headline rules.

So to create a class called headline primary we'll write

ampersand dash primary.

[SOUND] And inside the rule, we'll extend that headline primary placeholder.

So we'll say, extend headline primary, and

let's add a bottom margin.

[SOUND] And we'll make the bottom margin equivalent to 70 pixels.

For the h1's 42 pixel font size and now we'll create

the headline secondary selector by simply copying the rule we just wrote.

And I'll just paste it right below and let's change primary

to secondary and we'll need to extend the headline secondary, or sec.

Placeholder, and let's make the bottom margin equivalent to 22 pixels for

its font size context of 24 pixels.

So now we can give our headline elements their respective classes.

So we'll go back to index.html, and we'll give the h1 element a class attribute.

And we'll give it the class [SOUND] headline-primary.

And then we'll give the h2 the class headline-secondary.

[SOUND] Creating modular classes like these for

our main headlines gives us the ability to use them on

other elements that are not necessarily [SOUND] h1's and h2's.

So for instance, if for any reason these were say div elements instead of

heading elements as long as they have the element classes they will always be

styled as primary and secondary headlines.

But as good practice, let's also extend those place holders we

created in our h1 and h2 element rules.

So we'll go back to the headlines partial, and I'll just go ahead and

copy the extent for headline primary, and I'll replace every declaration in

our base h1 rule with the headline primary extend.

And then we'll go back and copy the one for headline secondary, and

once again replace every declaration in the h2 rule with the extend.

So this way we'll also have the option to use the HTML tags only for

the element style.

So, for instance, let's get rid of this primary and secondary headline classes.

And if we take a look at our markup, everything still sort of look the same.

Our headlines remain styled.

So, we are achieving a few things with a single place holder selector.

So, I'll just go back and undo what we just did.

This way we'll keep our headline classes.