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
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
<!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
|