Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
In this lesson, we're going to make the inline links on our web page look different from the navigation links. You need the files biblio_ serif_difflinkstates.html and biblio_serif_difflinkstates. css from the Exercise folder. You also need the fonts folder with the web font files for Chopin Script. Put a copy of the fonts folder into your Exercise folder so the Chopin Script will continue to load properly. Open up the HTML file in the browser to see what we are working with.
All the links are in place and look great, but I want to visually communicate that some of the links link to areas on the page and other links link to an external web site. So we are going to make links that go out to the external web sites look a little different on the hover. We are going to add a subtle color background instead of italicizing them like they do now. This will communicate that this is a different kind of link, a link to an external site, but we don't want all the links to change.
If all the links had a background color instead of turning italic on the hover, we would lose some of the elegance of the navigation list. Wouldn't it be great if we could tell the browser any links in this list should look one way and any links not in this list should look another way? We can. Open up the CSS. Here we have our link syntax. We are going to add a ul in front of it and that tells the browser use these link states for any links that are in an unordered list.
If we save the CSS and review the page in the browser, all of the links that are not in the unordered list, they revert to their default state. They are using the color that we set by the universal selector and they're underlined. So what we need to do now is restyle these inline links. We need to create link states for inline links. I copy and paste whenever I can. So I've just copied and pasted and now I am going to get rid of those ULs that I had added earlier.
And now we once again have the four states, love, hate, and let's style these so that they'll look the way we want our inline links to look. First in the a: hover, we don't want the style to be italic. So we are going to get rid of that, but we do want to have a background color. So we are going to add the line background-color and the color that I've picked for this is e8e6e3.
Second, we don't want to have the active link to be italic either, but we do want it to continue to have the background color. We are going to copy that and paste it. You notice I didn't make any changes to the original link or visited link, because those pretty much just have the link color in them and we are going to keep that the same. Excellent! Let's save this and review it in our browser. So now we can see that our original ul links are remaining italic and they have a background color.
We are going to take care of that in a second. Our new inline links have the background color and do not turn italic. Now why does this one have the background color, when we didn't add a background color to it? The reason is that the unordered list link is going to pull some of the styling from the original link state. Even though we did these first, this is the pure link state here and the ul link state is sort of a build off of it.
So what we need to do is we need to go back and get rid of that background color. In the styling for our unordered list or ul link states, on the hover, we are going to put in a background-color, but this time we are going to make it white. And we are going to do the same on the active. it's still going to pull that background color in from the other link state, but now here it says no, no, no, make it different. I want it white.
I've saved that and let's review it in our browser. And now when we'll roll over those, they are italic and there's no background color. Well, there is, but it's the same color as the background color of a page so we don't see it. And here we see the background color. Excellent! I want to scroll down and show you one last thing and that's our top links, our links to the top here. They also have a background color because they are not in the unordered list. At the same time, they are not a link to an external site.
So I want to get rid of that background color. Let's do that. In the CSS, you are going to add a class .top and you are also going to copy and paste the hover state for the links. And we are going to change our background color here to white as well. So when we look at this, what this says is wherever there is a link that has the class top associated with it, make it look like this, including having a white background.
We also need to do that for our active state. So we do our class top, we'll copy this, add that to our class here, and make this a white background. So now wherever we have the class top on the active state, make sure the background color is also white. I am going to save this and now we need to add that class in our HTML.
Here is the link to the top and it's in a paragraph. We can add the class right to the p tag and again we do not use the dot in the HTML, only in the CSS, and again, the class will end at the p tag. [00:06:342.60] Okay, I am copying and pasting as I go down the page. So let's save this and we'll review it in our browser.
Refresh and now when we roll over the top, it does not have the background color and the external links still do. Excellent! Sometimes we need subtle differences in links so they feel right on the page. Some links may need to be centered while others are left aligned. Some links might need a color background while others don't. The trick is to be willing to make multiple sets of link states. Even subtle differences should be attended to.
Find answers to the most frequently asked questions about Typography for Web Designers.
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.