Exploring Background and Text Colors
| Specifying a background color other than white for a web page is easier than you probably realize. For example, to specify blue as the background color for a page, put style="background-color:blue" inside the <body> tag. Of course, you can use many colors other than blue. You can choose from a long list of standard color names, including such unusually descriptive choices as BurlyWood, LavenderBlush, and MistyRose. Admittedly, this sounds more like a box of designer crayons than it does a list of web color choices. Of course, the 16 standard Windows colors are also supported: Black, White, Red, Green, Blue, Yellow, Magenta, Cyan, Purple, Gray, Lime, Maroon, Navy, Olive, Silver, and Teal. (You can call Magenta by the name Fuchsia and Cyan by the name Aqua if you want to feel more artsy and less geeky.)
You can also specify colors for text in the <body> tag. For example, in Listing 9.1 you'll notice the following <body> tag: <body style="background-color:teal; color:fuchsia"> As you probably guessed, color:fuchsia makes the text color for the page fuchsia (which is the same as magenta). When placed in the <body> tag, the color style property impacts all the text on the page. However, you can set the color property for specific elements within the page to override the setting in the <body> tag.
You can also change the color of text links, including various properties of links such as the color for when a user hovers over a link versus when the user clicks a link. Setting the colors for text links involves using an internal style sheet, which you won't learn about until Hour 12, "Formatting Web Pages with CSS Style Sheets." In that lesson you'll learn all the details of how to apply colors to text links via CSS styles. Listing 9.1 and Figure 9.1 illustrate somewhat atrociously how to set the background color and text color of a web page. Because I used pure, beautiful teal as the background color in the graphics images, they blend right into the background of the web page. (I didn't need to use transparent images, which you'll learn about later in this hour.) Listing 9.1. Specifying the Background and Text Colors in the <body> Tag<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Teal and the Fuchsia</title> </head> <body style="background-color:teal; color:fuchsia"> <h1>CREDLEY HIGH SCHOOL</h1> <h2>"The Old Teal and Fuchsia"</h2> <div style="text-align:center"> <p style="font-style:italic"> <img src="/books/4/158/1/html/2/c.gif" alt="Cheer!" style="float:right" /> Oh, hail! Hail! Sing Credley!<br /> Our colors jump and shout!<br /> Deep teal like ocean's highest waves,<br /> Fuchsia like blossoms bursting out! </p> <p style="font-style:italic"> <img src="/books/4/158/1/html/2/cheer.gif" alt="Cheer!" style="float:left" /> As Credley conquers every team<br /> So do our brilliant colors peal<br /> From mountain tops & florist shops<br /> Sweet sacred fuchsia, holy teal! </p> <p style="font-style:italic"> Our men are tough as vinyl siding<br /> Our women, strong as plastic socks<br /> Our colors tell our story truly<br /> We may be ugly, but we rock! </p> </div> </body> </html> Figure 9.1. On a color screen, this ever-so-attractive page has a teal background and fuchsia body text, as specified in Listing 9.1. Just in case you didn't catch on, this page is somewhat of a sarcastic example of web page color at its worst. Fortunately, you can change the entire look and feel of this page by altering the two colors that are specified in the <body> tag. In other words, a single line of code is all you have to change to make a dramatic change to the page's appearance. |
EAN: 2147483647
Pages: 345