Fonts and Colors


Color is an exciting way to add interest to your Web pages. In addition to the obvious splash of color that images provide, you can add color to your fonts and page backgrounds. Be creative in your choices, but use a critical eye to review the results. Some colors are very difficult to read online and some color combinations are nearly impossible to decipher. Always provide some contrast in your color choice: use a light-colored font on a dark background and a dark-colored font on a light background.

Tip

In HTML, some colors are defined by name (such as navy, red, and black), others by a hexadecimal number. The six-digit number represents the amount of RGB (red, green, and blue) in the color. Lynda Weinmann, a well known graphic designer, has created a couple of color charts specifically for online use: http://www.lynda.com/hex.html.


So, how do you add color? With style sheet properties, of course. HTML does have a <font> tag that enables you to specify a font (such as Arial or Times Roman) and colors and sizes, but according to the W3C, users are not supposed to use it. Instead, they've given you the font-family, font-size, color, and background properties for your style sheets. The following code provides an example of how you can specify your fonts for the <body> and <h1> tags.

Caution

Just because you can specify a font doesn't mean that your visitor will have that font on his or her computer. To be on the safe side, always specify at least one alternate font, as I did in the following example. All but the most basic computers will have Arial and Times New Roman, so it's not a bad idea to use one of those two as your alternate font. Appendix B, "Style Sheet Quick Reference," contains a list of Web-safe fonts.


<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Fonts and Colors</title> <style type="text/css"> body {font-family:Trebuchet MS, Arial;        color:navy;        font-size:12;        background:white} h1   {font-family:Bookman Old Style, Times New Roman;        color:white;        font-size:14;        background:navy} </style> </head> <body> <h1>Fonts and Colors</h1> <p>This text is navy on a white background, but the heading    above is white on a navy background.</p> </body> </html>


By changing the values in the style properties, you change the results you see in the browser. Look at Figure 13.2 to see how the following changes affect what you see. By not adding a separate font-color and background property to the <h1> tag, the properties assigned in the <body> tag continue.

<style type="text/css"> body {font-family:Trebuchet MS;        color:black;        font-size:12;        background:#FFFF80} h1   {font-family:Bookman Old Style;        font-size:14} </style>


Figure 13.2. The background property sets the background color of the entire tag, so using the property on the <body> tag sets the color for the entire page.


Tip

Don't get carried away with your font selections. A good rule of thumb is to use no more than three different fonts on each page: one font for the headings, one for the body text, and one for any special text, such as captions and pull-quotes.




Sams Teach Yourself HTML in 10 Minutes
Sams Teach Yourself HTML in 10 Minutes (4th Edition)
ISBN: 067232878X
EAN: 2147483647
Year: 2004
Pages: 151
Authors: Deidre Hayes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net