Text is the most important element of any Web page. Without text, there is nothing on the page to help people decide whether it's worth coming back. Text on an HTML page is structured by the <body>, <p>, <td>, <tr>, <th>, <h1> <h6>, and <li> tags (among others). You can add your own style preferences to each of these tags using the style properties shown in Table 5.1.
Note
In the following example, we've added some embedded style elements that set the font, font size, and font color for the body text of the basic HTML document we created in Lesson 2, "Creating Your First Page." In Figure 5.3, you can see how those styles change the appearance of the document in the browser. <!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>My First Web Page</title> <style type="text/css"> body {font-family:"Arial"; font-size:"12pt"; color:red} </style> </head> <body> <p>This is my <b><i>first</i></b> Web page.</p> </body> </html> Figure 5.3. The browser applies the style attributes to the text in the <body> tags.Table 5.1 lists the many style properties that you can use to format your text. Microsoft maintains a brief tutorial for style sheets on its typography site (http://www.microsoft.com/typography/default.mspx). The tutorial teaches Web page authors how style sheets can enhance their documents. The <style> tag for one of those examples is shown in the following code. This is impressive because of the many different styles and classes defined in this document. You can see that you are only limited by your own imagination. You can see the page this style code created in Figure 5.4. <style type="text/css"> body {background: coral} .copy {color: Black; font-size: 11px; line-height: 14px; font-family: Verdana, Arial, Helvetica, sans-serif} a:link {text-decoration: none; font-size: 20px; color: black; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} .star {color: white; font-size: 350px; font-family: Arial, Arial, helvetica, sans-serif} .subhead {color: black; font-size: 28px; margin-top: 12px; margin-left: 20px; line-height: 32px; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} .what {color: black; font-size: 22px; margin-left: 20px; font-weight: bold; font-style: italic; font-family: Times New Roman, times, serif} .quott {color: black; font-size: 120px; line-height: 120px; margin-top: -24px; margin-left: -4px; font-family: Arial Black, Arial, helvetica, sans-serif} .quotb {color: black; font-size: 120px; line-height: 120px; margin-right: -1px; margin-top: -33px; font-family: Arial Black, Arial, helvetica, sans-serif} .quote {color: red; font-size: 24px; line-height: 28px; margin-top: -153px; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} .footer {color: cornsilk; background: red; font-size: 22px; margin-left: 20px; margin-top: 16px; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} .headline {color: black; font-size: 80px; line-height: 90px; margin-left: 20px; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} .mast {color: cornsilk; font-size: 90px; font-style: italic; font-family: Impact, Arial Black, Arial, Helvetica, sans-serif} </style> Figure 5.4. The preceding style code produced this page, found at http:/ / www.microsoft.com/ typography/ css/ gallery/ slide3.htm.Caution
Link StylesYou have probably seen those bright blue underlined hyperlinks on the Web. Style sheets have the following selectors to help you change the look of them:
Table 5.2 shows some of the style properties you can assign to your links.
Tip
Color StylesAs you can see in Table 5.3, you can apply color to your HTML tags in two different ways: with color or with background.
Tip
Caution
|