The Wayback Machine - https://web.archive.org/web/20090213020457/http://www.webreference.com:80/html/tutorial7/7.html


spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

I Shot the Serif

Example: A Terry Pratchett Novel


Developer News
Open Source ECM Growing Up
Android's Second Act, G2 Rumors Heat Up
Eclipse Rolls Out PHP Development Tools 2.0

In this example, an attempt is made to faithfully reproduce a piece of one of Terry Pratchett's novels. As with most novels, the paragraphs are close together (never mind how we do that for now) and have a small indent on the first line, which is specified using the text-indent property. They are also justified, using the text-align property. When Death speaks, his words are rendered in a bold Gothic font (font-weight and font-family) in uppercase (using text-transform). Some more properties that I haven't told you about yet make the whole text narrow, as if it was a page from a book. The stylesheet and document are the following:

BODY { background-color: white; color: black; }
DIV { width: 13cm; align: center; }
P {
 /* Indent and justify paragraphs, novel-style */
 text-indent: 2ex;
 text-align: justify;
 margin: 0;
}
.death {
 /* Death always speaks in bold Gothic small caps, 
    but we'll settle for uppercase */
 text-transform: uppercase;
 font-weight: bold;
 font-family: Gothic, fantasy;
}
P.source {
 /* Right-align the name of the source */
 text-indent: 0;
 text-align: right;
 width: 13cm; align: center; 
 margin-top: 0.5em; margin-left: 0.5cm;
}
CITE {
 /* Italicize the title */
 text-style: italic;
}
<DIV>

<P><SPAN CLASS="death">Rincewind?</SPAN> Death said, 
in tones as deep and heavy as the slamming of leaden 
doors, far underground.</P>

<P>'Um,' said Rincewind, trying to back 
away from that eyeless stare.</P>

<P><SPAN CLASS="death">But why are you here?</SPAN> 
(Boom, boom went crypt lids, in the worm-haunted 
fastnesses under old mountains...)</P>

<P>'Um, why not?' said Rincewind. 'Anyway, I'm sure 
you've got lots to do, so if you'll just-'</P>

<P><SPAN CLASS="death">I was surprised that you 
jostled me, Rincewind, for I have an appointment 
with thee this very night.</SPAN></P>

<P>'Oh no, not-'</P>

<P><SPAN CLASS="death">Of course, what's so bloody 
vexing about the whole business is that I was 
expecting to meet thee in Psephopolis.</SPAN></P>

<P>'But that's five hundred miles away!'</P>

<P><SPAN CLASS="death">You don't have to tell me, 
the whole system's got screwed up again. Look, 
there's no chance of you-?</SPAN></P>

<P>Rincewind backed away, hands spread 
protectively in front of him. The dried fish 
salesman on a nearby stall watched this madman
with interest.</P>

<P>'Not a chance!'</P>

<P><SPAN CLASS="death">I could lend you a 
very fast horse.</SPAN></P>

<P>'No!'</P>

<P><SPAN CLASS="death">It won't hurt a bit.</SPAN></P>

<P>'No!' Rincewind turned and ran. 
Death watched him go, and shrugged bitterly.</P>

<P CLASS="source">- Terry Pratchett, <CITE>The 
Colour of Magic</CITE></P>

</DIV>

Front Page123456789

http://www.internet.com

Produced by Stephanos Piperoglou

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Copyright 2008 Jupitermedia Corporation All Rights Reserved.

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Introducing the ASP.NET Ajax Frameworks · Windows Forms: Applications · Building a Client-Side Ajax Cache
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Verizon's Versatile VoIP Hub · Show Us the Money: What the Stimulus Bill Can Do for Wi-Fi · The Acer Aspire One Enters the Next Generation


All Rights Reserved. Legal Notices.

URL: http://www.webreference.com/html/tutorial8/
Created: Oct 20, 1998
Revised: Nov 3, 1998

Morty Proxy This is a proxified and sanitized view of the page, visit original site.