Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now we'll see how we're able to use what we've learned in the previous videos to create styles for headlines.
-
0:00
So now we're gonna see how we're able to use what we learned in the previous video
-
0:03
to create styles for our main headlines.
-
0:06
Now, we're going to create two headline blocks.
-
0:09
One will be headline primary, and the second one will be headline secondary.
-
0:14
And we're going to define these a little differently than we would for h1 and
-
0:18
heading 2 elements.
-
0:19
We'll see why in just a bit.
-
0:21
Now, since we're also going to create modifiers, for our headlines.
-
0:25
Let's first write place holder or selectors for the shared base styles.
-
0:30
So we'll go over to the extends.scss partial and
-
0:34
under the headlines comment we'll create our first place holder selector and
-
0:39
we're going to call it headline prim, or primary.
-
0:45
And right below, we'll create our second one for headline secondary.
-
0:49
So, we'll call this headline-sec.
-
0:53
So, what I'll do next is copy the base styles from our h1s and h2s.
-
0:59
So first, I'll copy all the declarations inside the h1 rule.
-
1:04
And I'll paste them inside the headline primary place holder.
-
1:09
Then I'll go back to base.scss and copy all the declarations from the h2 rule and
-
1:16
this time paste them in the headline secondary place holder rule.
-
1:20
So now I'm just gonna add a few properties.
-
1:22
So, for instance, we're going to give headline primary a margin top of zero.
-
1:28
And we're gonna give headline secondary a letter spacing value.
-
1:34
And I've already created a config for
-
1:38
letter spacing as we can see here in our config partial.
-
1:41
The variable's called letter space.
-
1:42
I'll just go ahead and use this variable as our letter spacing value.
-
1:49
So now, we can style our main headline elements by creating a selector for them.
-
1:55
So, we'll head over to our Headlines.scss partial and first we'll target the class.
-
2:02
Headline, we're again going to take advantage of scss ampersand suffix
-
2:08
feature to define our primary and secondary headline rules.
-
2:12
So to create a class called headline primary we'll write
-
2:17
ampersand dash primary.
-
2:19
[SOUND] And inside the rule, we'll extend that headline primary placeholder.
-
2:28
So we'll say, extend headline primary, and
-
2:34
let's add a bottom margin.
-
2:37
[SOUND] And we'll make the bottom margin equivalent to 70 pixels.
-
2:43
For the h1's 42 pixel font size and now we'll create
-
2:47
the headline secondary selector by simply copying the rule we just wrote.
-
2:52
And I'll just paste it right below and let's change primary
-
2:57
to secondary and we'll need to extend the headline secondary, or sec.
-
3:03
Placeholder, and let's make the bottom margin equivalent to 22 pixels for
-
3:09
its font size context of 24 pixels.
-
3:14
So now we can give our headline elements their respective classes.
-
3:18
So we'll go back to index.html, and we'll give the h1 element a class attribute.
-
3:26
And we'll give it the class [SOUND] headline-primary.
-
3:30
And then we'll give the h2 the class headline-secondary.
-
3:36
[SOUND] Creating modular classes like these for
-
3:40
our main headlines gives us the ability to use them on
-
3:43
other elements that are not necessarily [SOUND] h1's and h2's.
-
3:48
So for instance, if for any reason these were say div elements instead of
-
3:53
heading elements as long as they have the element classes they will always be
-
3:58
styled as primary and secondary headlines.
-
4:01
But as good practice, let's also extend those place holders we
-
4:06
created in our h1 and h2 element rules.
-
4:10
So we'll go back to the headlines partial, and I'll just go ahead and
-
4:13
copy the extent for headline primary, and I'll replace every declaration in
-
4:19
our base h1 rule with the headline primary extend.
-
4:23
And then we'll go back and copy the one for headline secondary, and
-
4:28
once again replace every declaration in the h2 rule with the extend.
-
4:34
So this way we'll also have the option to use the HTML tags only for
-
4:40
the element style.
-
4:41
So, for instance, let's get rid of this primary and secondary headline classes.
-
4:48
And if we take a look at our markup, everything still sort of look the same.
-
4:52
Our headlines remain styled.
-
4:54
So, we are achieving a few things with a single place holder selector.
-
4:58
So, I'll just go back and undo what we just did.
-
5:00
This way we'll keep our headline classes.
You need to sign up for Treehouse in order to download course files.
Sign up