gives the brows er more than one font o ption, that way if a particular font is not supported, it can choos e another. The
browser will try each font in turn, from left to right, and use the first one that is s upported on the viewing computer.
Most co mputers can us e these fonts: Times, Arial, Helvetica, and Courier. If no ne of those fonts are available, you can
specify a generic name for a font. In the property above, we're telling o ur computer that, "if Arial or Helvetica are not
available, then pick the default s ans-serif font to display the page." A s ans-serif font is a font without the serifs (curls o r
tips) on the letters.
Go ahead and change the first font in the list above. Fo r example, change Arial to Times. Try Courier. Try taking the fo nt
names off completely and just s pecifying one o f the generic fo nts available on most computers:
serif e.g. Times, New York, Garamond
sans- serif e.g. Arial, Helvetica, Geneva
cursive e.g. Zapf Chancery, Ribbon
fant asy Decorative fonts such as Western
mono space e.g. Courier, or Monaco
We can also change the look o f our page completely using CSS. Modify your code as shown:
CODE TO TYPE:
<title> My Home Page </title>
<h1>Welcome to My Home Page</h1>
My favorite live rock bands:
and see the changes that we made to our page.
We set the background- color property to black, set the foregro und color—the color o f the text—to white, and changed
the font- family to mono space. This com pletely changes the lo ok of our page. Don't fo rget to use sem i-colons to
separate the pro perties in your CSS rule for bo dy; this is easy to forget, and co uld cause all o f the CSS that falls below
the forgotten semi-colo n to fail, which can be confusing! If you find yourself running into problems, that's the first thing
Styling with Classes
Suppos e you want to change the background color of every other <li> element. How would yo u do that?
First we'll try us ing the <li> elem ent as a selecto r. Modify your code as shown: