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 in the modern bibliography look different from the navigation links at the top of the page. You need the files biblio_ sans_difflinkstates.html and biblio_sans_difflinkstates. css from the Exercise folder. Open up the HTML file in the browser to see what we're working with. All the navigation links are in place from the last lesson and look great. But we're going to have to change our inline links. Before we do this, let's change our text color to black as we planned at the start of this chapter.
That will help our inline links stand out. In the universal selector, we'll change our text color to black. We'll save and review in our browser. So we know how to set up two different sets of links in our CSS, but design wise, how should we style our Inline links so they work in a system with the navigation links? We can't use the background colors. My recommendation is to use the same color palette, just apply it to the text of the links, not to the background of the links.
For example, since the navigation links use a blue background, we'll make our inline links blue. On hover, the navigation links turn a darker blue, so on hover our inline links will also turn in darker blue. On active, the text of our navigation links turns a dark yellow. Our inline links will do the same. The only change I would make is that the navigation links don't change when they've been visited, so they don't have a different visited state.
I think our inline links need to have a visited state, so our readers know whether or not they follow that link to an external web site. Let's go into our CSS and make these changes. If you scroll down, you can see I've already gotten us started here. I've noted that we're working on our Inline links and I've started our four states. Our pseudo-class selectors are here. For our a:link, we're going to make it that blue color, which is #264c73, and we're going to give it a text- decoration: none. Our visited links...
Well we want to our visited links to look a little bit different. Why don't I use that dark blue color that we're also using for the hover? So we use a color #143352 and also our text-decoration: none. For the hover, we can do that nice dark blue. Go ahead and we can copy and paste it right here. And then on active, I can also copy and paste and then I'll just change that color to the dark yellow, which is #d1cb94.
Let's save that and review it in our browser. So we have our links and they're blue and when we roll over them, we're not seeing our hover color. the reason is that I've visited these links today. Actually what I need to do is I need to go up and clear my Recent History. We talked about this earlier. And Refresh and now I can see,there is my inline link.
It's a little bit lighter and when I hover over it, it gets a little bit darker, but it is pretty subtle. The two different blues are really similar. When we use them up here for our background colors, even though they're similar, they stood out enough. We could really see the difference, but that difference is getting lost in the text. So what we're going to do is we're going to go in and slightly change those blues in our CSS so we still have a lighter blue and a darker blue, but we're going to make the lighter blue a little bit lighter and the darker blue a little bit darker.
So we're going to change this link, I already did some testing on this, to #3d668f and then our visited link become #19334d. And we're also using that same color in our hover, so I'm copying it and pasting it. I'll save it, go back into our browser and Refresh, and now we can see that the lighter blue is lighter and the darker blue is darker.
Let me click on it. We can come back to it and we can really see the difference. Well, we can see more of a difference between our unvisited and our visited links. One problem I'm having with this though is because if I use the same color for visited as I have for hovered, for hover there's just not enough of the difference between the two. So I'm going to have us go back into our CSS one last time here and on our hover, I would like for an underline to show up when we hover over it and then I also recommend adding an underline for the active state, so that the underline doesn't disappear when we click.
Let's save that, go back into a browser one last time, Refresh, and now when we roll over, we get the underline. When we click, the underline is still there, and when we return, it's gone. Excellent! Our inline links are all set.
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.