Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 start making the links in the modernist bibliography look the way we want them to. One thing we need to attend to in the process is the space between the navigation links. You'll need the files biblio_sans_ linkstates.html and biblio_sans_linkatates.css from the Exercise folder. Open up the HTML file in the browser to see what we're working with. Al the links are in place, but they're defaulting to blue and they're underlined and the links at the top all run together in a single line with no space between them.
We're going to style the navigation links so they look the way we want them to. Here is a screenshot of what they should look like. So let's open up our CSS. First, let's note that the syntax were about to write is for the navigation links. I'm going to go ahead and select this notation and copy it and down at the bottom where we've started some of our syntax for our links, I'm going to paste it and I'm going to write in that this is for our navigation links.
Now we'll add the four states we need to work with and since these are for the navigation links and they're in an unordered list, we're going add the ul in front of the pseudo-class selectors. So there's our Love link and visited and now we'll do our Hate, hover and active, and now we can start styling these.
What we want to do is we want to think about the things that are going to stay consistent between the four states, because the consistent styles we can actually add to our ul and our li syntax. First of all, we like the links to be centered, so let's add that up to the ul, so that the entire list will be centered. Text align: center. We also want the links to all have the same size and line-height we can add that down here with our list item, our li. We'll set out font-size to 1.4em and our line-height to 2.4em.
Now we can style the individual links. Let's start with our a:link here. We wanted to have a color and let see the color is the same as our background color, which is fcf8cf. And we don't want any text decoration, so text-decoration is none, and we want to have background color and we're going to use a blue and that is 264c73.
We also want it to have some space. We're going to put padding along the top of 1em, padding on the right of 0.6em, padding on the bottom of 0.6em and padding on the left also of 0.6em. This syntax tells the links to be light yellow on a blue background, to not have an underline and to have space surrounded.
I added slightly more space above the links than on the other sides, because otherwise they tend to feel a little bit too high in the background color. Let's save and review this in our browser. It's starting to look good, but we have some work to do. We can set the other three states of our links. We're going to go ahead and copy and paste into our next state here, our visited state. When working with a background color it is extra important to copy and paste, because we're setting these padding, these measurements of space around the link, and if those accidentally get changed from one state to another, then when you rollover a link or you click on it, the size of the background color will change on you and the links will sort of move around. So we want to keep those consistent.
Our visited state isn't going to change from our link state because we decided that the visited link should look the same as the other links, as the regular unvisited link, but the hover is going to change. The hover is going to have a different color background. It needs to be 143352, and then finally we can also do the syntax for our active state and here the active state is going to have the same background color as our hover, so I can copy and paste that, but it's also going to have a slightly darker text color.
So we need to put that in. We're going to use d1cb94. Let's save this and review it in our browser and see how it's looking on the hover. Excellent! It's turning that darker blue and when we click just for a moment there, you can see that the text gets slightly darker. Hopefully you can see that. It's very subtle. I know you might be viewing this on a pretty small screen, okay.
So the states are all set, but there's still one thing here that doesn't look the way that we had set it up to look, and that these lines of space are coming up in between the links. And that doesn't make sense, because in the universal selector we've set all of our margins and padding to 0. So this space shouldn't be showing up, but let's go into the CSS and I'll show you what's happening. So first of all in the CSS, our margin and padding is 0, so it shouldn't be happening. Let's go into our HTML.
What we were running into here is a bit of a glitch. These line items, which are our main navigation, they're on different lines in the HTML and when that happens it automatically puts this little bit of space between them. So all we have to do is delete the returns that were put into the syntax. So now when you look at this, the syntax, it all just runs and there are no returns in there and that should get rid of the spaces now that we've removed that, and it did.
You know, putting a return in your syntax is not supposed to change the way the web site looks in a browser, but sometimes it does. That's a glitch and that's how you get rid of it. It looks great! So excellent! Our navigation links look good!
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.