46 Lesson 5
Web browsers give precedence to the style that appears closest to the tag.
So, inline styles (which appear as attributes within the tag itself) are most
important. Embedded styles (which appear at the top of the HTML file)
are applied next, and linked styles (which appear in another file alto-
gether) are applied last.
Imagine that you have created an embedded style for the
<h1> tag, but want
to change that style for one occurrence of the
<h1> tag in that document.
You would create an inline style for that new
<h1> tag. The browsers recog-
nize that fact and change the style for that tag to reflect the inline style.
Caution Style sheet precedence is supposed to place
more importance on embedded styles than on linked
style sheets. In actual practice, however, you’ll find
that both Internet Explorer and Netscape treat linked
sheets as more important than embedded sheets (but
they do treat inline styles as more important than
either of the other two). You’ll find that you have bet-
ter luck if you use either linked or embedded styles,
but not both.
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.
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.
47Adding Your Own Style
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.
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.
continues
48 Lesson 5
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 imag-
ination. 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;
TABLE 5.1 Continued
Property Description of Use and Values
49Adding Your Own Style
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>
50 Lesson 5
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 pub-
lish 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.
Get Sams Teach Yourself HTML in 10 Minutes, Fourth Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
