Styling the Headlines5:03 with Guil Hernandez
Now 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
You need to sign up for Treehouse in order to download course files.Sign up