From A Connecticut Yankee in King Arthur's Court by Mark Twain
Chapter 1
The Tale of the Lost Land: Camelot

"CAMELOT - Camelot," said I to myself. "I don't seem to remember hearing of it before, Name of the asylum, likely."

It was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. The air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, and there were no people, no wagons, there was no stir of life, nothing going on. The road was maily a winding path with hoof-prints in it, and now and then a faint trace of wheels on either side in the grass - wheels that apparently had a tire as broad as one's hand. And so on...



Go to HTML Version         View the STYLE Version here        
I have a container I'm using for the layout of the
page. I've named it div.container and it has the 
following style rules:
div.container   {
    background-color: #ffffff;
    margin-left:20px; 
}
The following sets up the style for each paragraph
in this document. Notice the paragraph style shown 
above it has a defined line height for visual leading.
p	{
font-family: Tahoma, Geneva, sans-serif;
font-size:1.1em;
line-height:1.5em;
margin-left:50px;
margin-right:20px;
color:#000000;
}
This bit of code establishes what the Credits will look like throughout the document. There is a SPAN class that makes the text Italic as well.
div.credit  {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .95em;
line-height: 1.2em;
color: #000000;
text-align: right;
margin-left: 20px
border-bottom: solid 2px #000000;
}
span.booktitle {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}

<div class="credit">From: <span class="booktitle"> A Connecticut Yankee in King Arthur's Court</span> by Mark Twain</div>
To make the Chapter Credits take on the qualities of the 
special Class code, I've applied the div class and span 
class statements shown above and demonstrated here.
Connecticut Yankee in King Arthur's Court by Mark Twain
This bit of code establishes what the Chapter Numbers 
will look like throughout the document.
div.chapnumber	{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2.5em;
font-weight:bold;
color:#FFFFFF;
background-color: #82AFF0;
margin-left: 20px;
padding:0.5em;
}
<div class="chapnumber">Chapter 1</div>
 
To make the Chapter 1 Heading take on the qualities of 
the special Class code, I've applied the DIV CLASS 
statement shown above and demonstrated here.
Chapter 1
This bit of code establishes what the Chapter Titles 
will look like throughout the document.

div.chaptitle	{	
    font-family: Georgia, "Times New Roman", Times, serif;	
    font-size: 1.5em;
    line-height: 2em;	
    font-weight: bold;	
    letter-spacing: .2em;	
    margin-left: 20px;
}

<div class="chaptitle">The Tale of the Lost Land: Camelot</div>

To make the Chapter Title Heading take on the qualities 
of the special Class code, I've applied the div class 
statement shown above and demonstrated here. Notice the 
letter spacing!
The Tale of the Lost Land: Camelot
I also had an idea to add some style rules to the hr tag. 
Mainly, to see if I could affect its style. And, I did.
hr {
	width: 80%;
	color: #82AFF0;
	border: 6px solid;
}
I wasn't successful in using CSS to align this to the center of
the page, so I added an align="center" to the hr tag.


Go to HTML Version         View the STYLE Version here         Return to the Top