Font Attributes
Finally, let's add a few font attributes to the topmenu div. Change the typeface using the font-family tag. In Dreamweaver, if you type font-family: a list of available options pops up. I chose a sans-serif family starting with Verdana:
Don't forget to add the semi-colon at the end of the line, because Dreamweaver doesn't do it for you. The final tag looks like this:
Now let's change the scale of the text using the font-size tag. However, instead of designating the size in pixels, we are going to expriment with percentages! This may be a new technique for you, but it is becoming standard practice for some web designers.
Start off with a font size of 80% for the topmenu text:
Finally, add a font-size to the body tag, and start experimenting with different numbers. What I hope you will discover is when you use percentages for font size, they cascade down. So, if you set a font-size of 80% in the topmenu, that is 80% of the body font-size. Try this: set the body font-size to 20px and the topmenu font-size to 50%.
background-color: #FFCC00;
color: #993300;
font-size: 20px;
}
#topmenu {
background-color: #999999;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:50%;
}
Now change the body font-size to 40px and test again. Do you see how it's all relative now? If you want to change the overal size of your display, just change the body font-size and everything else follows!
Do you see why you might want to use this technique in the future?
So, here is a shot of my CSS :
Click here to see what my final project is looking like. Not bad, but it's going to look even better after the next lesson