Styling the 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