557386 Ch04.qxd 4/2/04 11:01 AM Page 74
Ł
74
Creating Cool Web Sites with HTML, XHTML, and CSS
The effects of both word and line spacing are shown in Figure 4-7.
Figure 4-7: Word and line spacing can dramatically change the way text looks on a page.
Not all possible settings are good, of course. A line height that’s too small results in the lines
of text becoming illegible as they’re overlapped. The single addition of
line-height: 1.25
,
however, can significantly improve the appearance of a page, and you can increase line
height for the entire document by changing the style of the
body
tag. Adding the following
code to the top
<style>
block changes all the text on the page:
body { line-height: 1.25 }
Cool, eh? I tweak the body container again and again as I proceed. It’s very useful!
Text alignment
HTML includes some attributes for the
<p>
tag that let you specify if you want the text to be
left, center, or right aligned, or justified, where both the left and right margins are aligned.
These attributes are replaced in CSS with the
text-align
style, which has the following
possible values:
•
left
•

Specifies that bottom of element aligns with bottom of lowest text element in line
super
Indicates superscript
sub
Indicates subscript
A nice demonstration of this capability is a technique for having trademark (
tm
) character
sequences displayed attractively on a page:
.tm { vertical-align: top; font-size: 33%; font-weight: bold; }
In use, this might appear as
Though just about lost to common parlance, it remains the case that
Xerox<span class=”tm”>tm</span> is a trademark of Xerox Corporation.
Text decorations
One HTML text decoration that, surprisingly, made it to CSS is underlining. As discussed in
Chapter 3, underlining text on a Web page is somewhat problematic because it can become
quite difficult to differentiate links from underlined text. But the CSS
text-decoration
style
enables more than just underlining. It provides the following four values:
•
underline
•
overline
•
line-through
•
blink
With the exception of
overline

text-transform
, deals with the capitalization of text
and has the values specified in Table 4-4.
Table 4-4: Text Transformation Values
Value Meaning
capitalize
Displays the first letter of each word as caps and all others as lowercase
uppercase
Displays all letters as uppercase
lowercase
Displays all letters as lowercase
none
Displays characters as specified
To have a paragraph of text transformed into all uppercase, for example, use
text-transform:
uppercase;
, and to instantly ensure that all header level ones are in proper case, use:
h1 { text-transform: capitalize; }
Putting it all together
Let’s pull the example from the end of the last chapter and see how using CSS can help jazz
up the presentation. Here’s what I’ve produced with just a little CSS tweaking (notice that I
always include a font-family default value, too):
<style type=”text/css”>
body { font-family: Arial,Helvetica,sans-serif; font-size:90%;
line-height: 1.25; }
h1 { text-transform: capitalize; text-decoration: overline
underline; color: blue; letter-spacing: 0.05em; text-align: center; }
{ font-variant: small-caps; font-weight: bold; }
.email { color: #909; font-family: monospace; font-size: 90% }
.tm { vertical-align: top; font-size: 40%; font-weight: bold; }

Check out the attractive result in Figure 4-8. Make sure you compare this figure to Figure 3-8
from the previous chapter to see how much more capability you’ve gained by moving to CSS.
Figure 4-8: The Travels With Tintin screen shot from Chapter 3 has been enhanced with the CSS styles presented
throughout this chapter.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch04.qxd 4/2/04 11:01 AM Page 78
Ł
78
Creating Cool Web Sites with HTML, XHTML, and CSS
Ł
One CSS shortcut that I haven’t mentioned here is the
font:
style itself. Many of the
tip
individual font-related styles can be combined into a single
font:
style, saving you a
lot of work. For example, the following two code lines are functionally
equivalent:
h1 { font-weight: bold; font-size: 22pt;
line-height: 30pt; font-family: Courier, monospace; }
h1 { font: bold 22pt/30pt Courier, monospace }
Well worth learning to save you typing!
Description
<span </span>
tences or headers to change individual words
style=
Provides specific CSS styles to apply to the
span
class=

Table 4-5: HTML Tags That Support CSS Covered in This Chapter
Tag Closing Tag
Specifies a nonbreaking CSS container; used within sen­
Identifies which CSS ID should be applied to the
Specifies a CSS container that acts identically to the
tag; forces a line break before and after
Identifies which CSS ID should be applied to the
References external CSS style sheet by name
Indicates the URL of the style sheet; by convention, sepa­
Specifies a block for CSS style definitions on Web page;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch04.qxd 4/2/04 11:01 AM Page 79
Ł
Chapter 4: Moving into the 21st Century with Cascading Style Sheets
79
Style Exemplary Usage Description
font-weight font-weight: bold
Specifies how much or how little to
embolden a text passage
font-style font-style: italic
font-family font-family: serif
Specifies which typeface to use for the
text passage, as a comma-separated list,
or which
font-family
to use from a
small predefined list
font-size font-size: 80%
Specifies the type size of the text pas­
sage in one of a wide variety of different

text-decoration text-decoration: underline
Specifies one or more of a variety of
simple text decorations
text-transform text-transform: capitalize
Specifies one of a number of text trans­
formations involving upper- and lower­
case letters
font font: 22pt monospace
allows the specification of a number of
different font characteristics
Table 4-6: CSS Styles Covered in This Chapter
Specifies whether to italicize, oblique, or
leave the text passage non-italicized
Transforms the text passage based
Indicates shorthand CSS notation that
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch04.qxd 4/2/04 11:01 AM Page 80
80
Ł
Creating Cool Web Sites with HTML, XHTML, and CSS
showing you how a few simple changes to your HTML, such as bold, italics,
looking at lists and special characters.
Ł
Summary
This chapter introduced you to the marvels of Cascading Style Sheets,
underlining, text alignment, and text decorations and transformations, can
result in dramatically improved Web page layout and text presentation. In
the next chapter, you continue your exploration of both HTML and CSS by
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 81

and
</dl>
. Within the pair of listings, a definition has two parts:
• Definition term (
<dt>
and
</dt>
)
• Definition description (
<d>
and
</dd>
)
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 82
Ł
82
Creating Cool Web Sites with HTML, XHTML, and CSS
Here’s how you can use a definition list in HTML to define some genetics terms:
<html>
<head>
<title>Miscellaneous Genetic Terms</title>
<body>
<h1>A Quick Glossary of Genetic Terms</h1>
<i>Adapted from Dawkins, The Extended Phenotype</i>
<dl>
<dt>allometry</dt>
<dd>A disproportionate relationship between size of a body
part and size of the whole body.</dd>
<dt>anaphase</dt>

Ł
Chapter 5: Lists and Special Characters
Figure 5-1: A glossary, formatted as a definition list, in HTML.
Obtaining this format within an HTML document requires the following tag placements:
<dl>
<dt><b>Blood Pressure</b></dt>
<dd>Balm, Black Haw, <i>Garlic</i>, Hawthorn.</dd>
<dt><b>Bronchitis</b></dt>
<dd>Angelica, <i>Aniseed, Caraway</i>, Grindelia.</dd>
<dt><b>Burns</b></dt>
<dd>Aloe, Chickweed, <i>Elder</i>.</dd>
</dt>
Figure 5-2 shows the result, which is, if I do say so myself, quite attractive and similar to the
original design.
Ł
By now, I hope that you can read the preceding HTML snippet and understand all
x-ref
the paired formatting tags. If not, you might want to skip back to Chapters 3 and 4
and study it a bit more to refresh your memory on text-style formatting.
There’s a smarter way to accomplish some of the formatting in this last definition list: Use a
CSS style modification that makes all
<dt>
tags appear in bold text. It looks like the following
in the
<style>
block:
dd { font-weight: bold; }
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 84
Ł

are context-sensitive tags:
They have meaning only if they appear within the
<dl> </dl>
pair.
What happens if you use
<dt>
and
<dd>
without wrapping them in a
<dl> </dl>
pair?
Sometimes, the result is identical to Figure 5-2: The default meanings of the
dt
and
dd
tags
are consistent in the Web browser, whether they appear within a list or not. In other browsers,
they are ignored. Later in this chapter, you learn about a different context-sensitive tag that def­
initely does the wrong thing if you don’t ensure that it’s wrapped within its list-definition tags.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 85
85
Ł
Chapter 5: Lists and Special Characters
To avoid lucky defaults that aren’t consistent across all browsers, always check
Ł
your HTML formatting in multiple Web browsers before concluding that the format-
tip
ting is correct. This can trip up even experienced Web page designers: My friend
Linda has been developing some new pages for an existing Web site and she asked

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 86
Ł
86
Creating Cool Web Sites with HTML, XHTML, and CSS
A combination of the two list types (unordered and definition) is often useful. The definition
list looks very professional with the addition of a few style tweaks, and the bullets next to
each item in the unordered list look slick, too. The solution is to nest lists within one another,
as follows:
<style type=”text/css”>
dt { font-weight: bold; margin-top: 10px; margin-left: 1em; }
li { font-size: 80%; }
</style>
<body>
Common herbal remedies include:
<dl>
<dt>Blood Pressure</dt>
<dd><ul>
<li>Balm</li>
<li>Black Haw </li>
<li><i>Garlic</i></li>
<li>Hawthorn</li>
</ul></dd>
<dt>Bronchitis</dt>
<dd><ul>
<li>Angelica</li>
<li><i>Aniseed</li>
<li>Caraway</i></li>
<li>Grindelia</li>
</ul></dd>

Ordered (Numbered) Lists
What if you want to create a list, but with numbers instead of bullet points? The adage “sim­
pler is better” suggests the formatting in the following example:
<html>
<head>
<title>Enchilada Recipe, v1</title>
</head><body>
<h2>Enchilada Sauce</h2>
1. Heat a large saucepan and saute the following ingredients until soft:
<ul>
<li>Two tablespoons virgin olive oil </li>
<li>Large onion, chopped </li>
</ul>
2. Add a quart of water.<br />
3. Sprinkle in a quarter-cup of flour.<br />
Continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 88
Ł
88
Creating Cool Web Sites with HTML, XHTML, and CSS
Continued
4. Jazz it up by adding:
<ul>
<li>Two tablespoons chili powder </li>
<li>Two teaspoons cumin </li>
<li>One teaspoon garlic powder </li>
</ul>
5. Finally, add a teaspoon of salt, if desired.
<br /><br />

take advantage of the ordered list style:
<ol>
<li>Heat a large saucepan, and saute the following ingredients until soft:
<ul>
<li>Two tablespoons virgin olive oil </li>
<li>Large onion, chopped </li>
</ul>
<li>Sprinkle in a quarter-cup of flour. </li>
<li>Jazz it up by adding:
<ul>
<li>Two tablespoons chili powder </li>
<li>Two teaspoons cumin </li>
<li>One teaspoon garlic powder </li>
</ul> </li>
<li>Add a quart of water. </li>
<li>Finally, add a teaspoon of salt, if desired. </li>
</ol>
Whisk as sauce thickens; then simmer for 20 minutes.
The output (see Figure 5-6) not only produces a better enchilada sauce, but it is consider­
ably more attractive because Web browsers automatically indent lists of this nature. As a
result, the nested-list items are indented twice: once because they’re part of the numbered
list, and a second time because they’re the list-within-the-list.
Figure 5-6: An example of automatic numbering using the ordered list style and indents.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 90
Ł
90
Creating Cool Web Sites with HTML, XHTML, and CSS
Ł
A final note on lists: There are a number of additional HTML tags from the early

3. Findings
4. Conclusions
B. Body of Paper
1. Previous research
2. Research methods used
3. Results and findings
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 91
91
Ł
Chapter 5: Lists and Special Characters
C. Conclusion
1. Implications
2. Directions for future research
D. References
If you want to reproduce the preceding example on a Web page, you could accomplish it by
using three levels of numbered-list items, many bullet points, or no indentation at all. None of
these options is what you want, and that’s where the enhanced ordered-list extensions come
in handy.
Ordered lists have two extensions:
type
, which specifies the numeric counter style to use;
and
start
, which begins the count at the value you specify, rather than at one.
You can use any of five different types of counting values:
•
<type=”A”>
is uppercase alphabetic (A, B, C, D).
•

<ol type=”a”>
<li>What? Why? </li>
</ol> </li>
Continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch05.qxd 4/2/04 9:48 AM Page 92
Ł
92
Creating Cool Web Sites with HTML, XHTML, and CSS
Continued
<li>Findings </li>
<li>Conclusions </li>
</ol> </li>
<li>Body of Paper
<ol>
<li>Previous research </li>
<li>Research methods used </li>
<li>Results and findings </li>
</ol> </li>
<li>Conclusion
<ol>
<li>Implications </li>
<li>Directions for future research </li>
</ol> </li>
<li>References </li>
</ol>
This outline displays correctly in a Web browser, as you can see in Figure 5-7.
Figure 5-7: An outline using special <ol> attributes to display varied types of numbers and letters.
Bullet shapes
If you’re experimenting with list styles as you read along—and I hope you are—you may have

<li>Facets of a Square:
<ul type=”square”>
<li>four sides of equal length </li>
</ul> </li>
<li>Interesting Facts about Circles:
<ul type=”disc”>
<li>maximum enclosed area, shortest line </li>
</ul> </li>
</ol>
<div style=”text-align:center; background-color:yellow;”>
Weird, unrelated information.
</div>
<ol type=”i”>
<li value=”3”> and much, much more! </li>
</ol>
Figure 5-8 shows the preceding HTML text in a Web browser. Notice that the numbered list
seems to flow without any interruption, something that would be impossible to accomplish
without adding a subsequent
value
attribute to the ordered list.
Figure 5-8: Geometric ramblings—showing off various ways you can fine-tune the presentation of list elements.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.