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 run across the top of the modernist bibliography. You need the files biblio_sans_navlinks. html and biblio_sans_navlinks.css from the Exercise folder. Open up the HTML file in the browser to see what we're working with. You will see I have added the links in a nav container above the main heading and made them a list. Basically, I did the steps we went over in Chapter 6, Lesson 2, Adding a list of links.
You can refer back to that lesson if you want or need to. You can see the links are defaulting to the wrong size, have those lovely bullets and are stacked vertically. You will also see I added the inline links including the links to the top. In a later lesson, we will style the links so they look the way we want them to, but for now, we are going to get those navigation links into a horizontal line. We do that in the CSS. In the CSS, we need to add an unordered list.
Now scroll down to the bottom and put that there. Because our links are in an ordered list, that's why they have those bullets. We are going to give it a list style of none to get rid of those bullets and let's close that up with our curly bracket. Save that and let's review it in our browser. Okay, excellent! The bullets are gone. Now let's get them into a horizontal line. Back in the CSS, we are going to control our list items and we are going to say to display: inline, and that will make them display in a line.
Let's save that and review it in our browser. Hit Refresh. Excellent! They are all going along the top. Unfortunately, they're all running together without any space between them and they are squished right up against the top of the browser. We need to add padding to the list items to space them out. We can't do that in the ul or the li we just added, because these are links and we are using background colors for the links. So we need to add the spacing in the link syntax.
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.