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 the following example, we’ve added some embedded style elements that set the font, font size, and font color for the body text of a basic HTML page. 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>
The browser applies the style attributes to the
text in the <body> tags.
Lists the many style properties that you can use to format your text. 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.
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.
<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>
The preceding style code produced this
page, found at http://www.microsoft.com/typography/css/
gallery/slide3.htm.
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 Shows some of the style properties you can assign to your links.
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.
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 textdecoration: 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, you can apply color to your HTML tags in two different ways: with color or with background. 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.
Posted in 
Tags: 
I think you should offer free shipping to Vietnam with your new book. Then I could read. I live in Saigon. Thanks
mencogqnbgryhgl http://rqvbulrhlkdymmm.com [url=http://bwbshbhmwwzjmfk.com]hoistrtfuggkpzq[/url]
Demonstrate the spirit of free style…
My site is about the freestyle culture website, welcome to interested friends to visit!…
Yahoo News…
This is really good news today….
nice post. thanks.
[...] Formatting Text with Styles | Teach Yourself [...]
[...] Formatting Text with Styles | Teach Yourself [...]
I’ve just stumbled upon your site while searching for a tutorial on an related subject. Glad I did too. There’s a lot I like. Anyway, you’ve been bookmarked and I’ll be back soon.
[...] Formatting Text with Styles | Teach Yourself [...]