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 links in our traditional bibliography look the way we want them to. You need the files biblio_serif_ linkstates.html and biblio_serif_linkstates.css from the Exercise folder. You also need the fonts folder with the web font files for Chopin Script. Drag a copy of the fonts folder into your Exercise folder, so Chopin Script will continue to work correctly. View the HTML in your text editor.
I want to show you that I have added the inline links in the text since our last lesson. You can see that here. I have also added some anchor links back to the top of the page. Here is the new anchor at the top of the page. I also moved one of the anchors from the previous lesson. I had originally had to put the choosing anchor above the start of the div, but I decided that it was a little bit too high. We could still see the bottom of the h1 when we followed that link.
So I've moved it down and now it sits just above the h2, like the rest of the anchors do. Now let's open this file up in our browser and we can see what we are working with. Our links are defaulting to the dark brown color we have set in our universal selector in the CSS. They are also all underlined. And the links in the nav list are using a default size and line height, so they're a little bit too big and too tight. We are going to style the links so they look the way we set them up in Lesson 1 of this chapter.
I will remind you what they look like. We're going to do this in the CSS. We will add the four states we need to work with. I will put that down at the bottom here with my unordered list. The four states are a:link and we will need our curly brackets, a:visited and our curly brackets, a:hover and our curly brackets, and a:active and our curly brackets.
We are going to be able to style what the link looks like, what it looks like once we've visited it, what it looks like when we hover over it, and what it looks like while we are in the process of clicking on it. These states should always be in this order. A good mnemonic to help you remember it is love, lv, hate, ha. Now let's style these. First, what we are going to do is we are going to look at the things that stay consistent across all four states. Because we don't have to style it every single time in all four states.
Some of the things are we want them to be centered. We want them to all have the same size and the same line height. So what we are going to do is instead of styling that four different times in all four states, we are going to style this in our list item, because remember our links are list items as well. So here in our list item, we can say align:center. Put out the text there, text- align: center, font-size: 15 pixels.
That's the same size as our font and line-height is 30 pixels. That's a little looser than the line height we are using in the text so it looks more like a list. Now what we can do is style the individual things that we need to style for each of our states. So for instance in our a:link, we want a text-decoration: none and we want to use the color red that we have picked up, and that is 8a0f0f.
We want the visit state to look almost the same. It's just going to be a bit darker. So what we can do is we can copy this from the a:link and paste that into visited and all I have to do is change the color. We are going to use 660000. We want the hover link to look almost the same as the a:link as well. We're just going to make it italic. So I can put that a:link syntax in here and all I have to do is also say font-style: italic.
Then finally we have active. We want the active state to be most like the hover state. We want it to continue to have the italic style but we want it to use the darker red. So what I'm going to do, so I am going to go ahead and copy the hover state into the active state and then just change that color. 660000. Now you will notice that each of the four states also uses the text-decoration: none and I didn't put that up under the list item and the reason is because the text- decoration: none works with the link state.
So even if I have to put them all four times I put those in with my link states. Now let's go ahead and save this and review it in the browser. Refresh and it looks like it's working except that my line height isn't working. So I am going to go back and take a look at that and see what I did. I forgot a semicolon. Excellent! It happens all the time. I will save that and go back into browser again. Better! That's exactly what I was hoping for. So my links are red.
When I roll-over them they are italic, when I click on them they turn that darker red, and if I follow this up I can see that I have visited that bottom link because it stayed the darker red. So we are going to be fine-tuning these links and as we test them the one problem we are going to have is that we are going to lose that original unvisited state of the links, because once they turn to visited we can't see them in their unvisited state anymore.
So is there a way to continue to see them in their unvisited state? And yes, there is and we are going to cover that in the next lesson.
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.