Formatting Text with Styles


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.

Table 5.1. Style Properties for Text

Property

Description of Use and Values

background

Sets the background color for the text.

color

Sets the text color for the text.

font-family

Sets the font for the text.

font-size

Can be a point size, a percentage of the size of another tag, or xx-small to xx-large.

font-style

normal (which is assumed) or italic.

font-weight

extra-light to extra-bold.

text-align

left, right, center, or justify (full).

text-indent

Can be a fixed length or a percentage.

text-decoration

underline, overline, strikethrough, and none.


Note

Unless you (or the people viewing your pages) have adjusted the browser's default settings, normal HTML body text appears in 12 point Times New Roman font on most computer systems.


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

None of the most popular Web browsers react the same way to all the style sheet properties. Your best bet is to remember to test everything before you publish it. Webmaster Stop maintains a table of style sheet properties mapped to the most popular browsers. Check out this table (http://www.webmasterstop.com/118.html) to find out whether the style sheet properties you plan to use are supported by specific browsers.


Link Styles

You 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:

  • a:link Sets the styles for unvisited links.

  • a:visited Sets the styles for visited links.

  • a:active Sets the styles for the link while it is linking.

  • a:hover Sets the style for the link while your mouse is hovering.

Table 5.2 shows some of the style properties you can assign to your links.

Table 5.2. Style Properties for the Anchor Styles

Property

Description of Use and Values

background-color

Sets the background color for the link.

color

Sets the text color for the link.

font-family

Sets the font for the text of the link.

text-decoration

underline, overline, strikethrough, and none.


Tip

One of the most popular style sheet effects on the Web right now is to remove the underlining on hyperlinks. To do this on your pages, just add the text-decoration:none declaration to the a styles, as shown in the following example:

a:link {color:yellow;          text-decoration:none}


If you like the look of the underlined hyperlink, you're in luck. You don't have to specify anything at all. Underlining is assumed for all a styles.


Color Styles

As you can see in Table 5.3, you can apply color to your HTML tags in two different ways: with color or with background.

Table 5.3. Style Properties for Color

Property

Description of Use and Values

color

Sets the color of the text.

background

Sets the background of the page or text.


Tip

Check out http://wdvl.internet.com/Graphics/Colour/ for a quick tune-up of Web color selections.


Caution

Don't forget to test your pages before you publish them. Not all colors work together. If you've specified a black background color and a black text color, you've got a problem because no one will be able to see your text.




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