ISTA 230 Introduction to Web Design (Spring 2017)

Typography and Background Images

Dr. Ishihara is an optometrist who is trying to develop some online tools to help people test their eyesight. He has some knowledge of HTML but doesn't know anything about typography or background images.

Using your understanding of CSS properties that affect typography, create a standard eye chart like those used by optometrist. The relative font sizes for each line are as follows:

200%
100%
70%
50%
40%
30%
25%
20%
15%
13%
10%

When you're done, your webpage should look roughly like the following:

Eye Chart

Secondly, you are to create a color-blindness test using CSS background image properties and your understanding of the box model. You have been supplied with six color-blindness test images. Using your understanding of CSS, you should display the color blindness tests as background images for the supplied HTML <div> elements. You should also use CSS to make each of these images float next to one another.

When you're done, your webpage should look roughly like the following:

Color Blindness Tests

You are welcome to modify the HTML files, though it is not necessary to complete the exercise.

Download the source files for this exercise here.

Solution

Solution can be downloaded here.