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.
We have the image we'd like to use for our modernist bibliography. Now we need to add the image to our page. You need the files, biblio_sans_bgimage. html, and biblio_sans_bgimage.css from the Exercise folder. I have also provided an images folder with the image file in it. Open up the HTML file in the browser to see what we're working with. Everything is in place except for our image and based on our image we also need to make a couple of changes to our colors.
Let's put the image on our page. In the CSS, we're going to add the image to the background of the page, so we'll add it in the body tag. Let's type in background-image: url (images/books_bg.gif) and background-repeat: no-repeat, and background-position: 0em 10em, and background-attachment: fixed.
For right now we're going to leave our background-color. This tells the browser you want to use a background image and the URL says follow this path into the folder called images to find the image. Background-repeat: no-repeat means only use the image once. Don't repeat it. Background-position means position the image 10 ems over on the X axis and 10 ems down on the Y axis. Background-attachment when it's fixed it means keep the image in the same place in the browser, even when we scroll up and down.
So that means the image will always be visible. Let's save this and take a look at it in our browser. Great! The image came in. It's where we want it to be. And if we scroll down and back up, the image stays there. Of course, now we need to add some white into the background here so that we can actually read our text. Find the ID for your main_container, and add background-color: #ffffff for white.
Again, I am avoiding shorthand. And while we're here, we also know we want to make the rule line the yellow. Let's see. I want to bring the yellow in again. So let's see. Here's our section_ container, and our rule line right is a border-top in the section_container, and it's currently blue, and we're going to make it yellow, which is #cc9e33. Let's save that and we can review it in our browser. We can read our text now and we've brought that yellow in.
One of the problems we're still having though is that the text in the navigation links is still using the light yellow that was in this part of the page. And now that this part of the page is white, I think that the text for those links should be white. Let's go in and change that. Again, scroll down to the links and there's our navigation links and the color, we'll change that to white, and then we can copy and paste into visited, and also into hover.
We are not going to change it in active, because in active it's turning that sort of dark yellow and I want to keep that. We can save and review this in our browser. Great! Now the links have a white text. I think that's going to work better with the white background here. We do still have one last problem. The text is too close to the edge of the page here and you can really see it's not the same size as our navigation either. So we are going to have to fix that. We need to add some space in there between the content and the edge of the page.
And we'll take care of 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.