Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
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.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.