Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, in order to style the anchor links inside of the promo areas differently from the anchor links that we've defined down here, we need to add a custom class into the HTML. So let's go back to the index.html file. Let's scroll down. Let's find our promo container, and let's find the individual links that are inside of the individual promo areas. So for the first anchor link, we're going to come in here and add a class. Put in the letters CTA. It just stands for call to action.
This is just the name that we're making up. So let's come in here and copy that class name. Let's find the second link inside of the second promo. Let's paste that in here, and then the same thing for the third link, then hit Save. Now, what we need to do is write a CSS rule that's going to target this particular class if it's on an anchor tag. So we're basically going to create a CSS rule that's going to combine this anchor tag and the cta name. So let's come back to our screen_styles.css.
After the footer, let's hit a few returns. The rule we're going to create is going to be a.cta, then a space, put on our brackets. So, again, what this is doing is targeting anchor links that have a CTA class assigned to them. That way this differentiates these links from the ones up here. Now, let's split this open. I'm going to scroll up here a little bit. So, what we're going to do for these links, first, we're going to set a text-transform.
We're going to set that to uppercase so that all of those letters will be capital. That way we don't have to actually have capital letters in our HTML. Next line, we're going to set font-size to 0.9 ems. Since we're using all uppercase characters, we want to make the font a little bit smaller. So this is 10 percent smaller than the base font. Next, we're going to set font-weight.
We're going to set that to bold. Next line, we're going to set text-decoration to none. That way those links won't be underlined. Lastly, we're going to set margin: 0.5 ems on the top, 0 on the right, 0 on the bottom, 0 on the left. Once that's complete, let's save our work and let's reload this in a browser. Now, in our browser, we'll see that all these call-to-action links here are showing up with all uppercase, and they're 10% smaller than the base font.
Now, one thing you'll notice is that the hover state is still working and giving us that blue color. This is because the hover state on the main anchor links is cascading down through our custom class that we've assigned to these anchor links. Now that we've styled the text aspect of these links, next we'll add in a background graphic to put in the arrow.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 63192 Viewers
119 Video lessons · 70906 Viewers
125 Video lessons · 31925 Viewers
84 Video lessons · 18575 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.