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