CSS: Top Secret Classification - Floating Text for a Fairy Tale Look
(Page 3 of 4 )
Sometimes in books, especially those difficult-to-read ones written for children, you will see a paragraph that starts off with an enormous first letter. You can create these obese beginnings in HTML by making floating text, like so:
<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.8em;
font-size:500%;
font-family:times;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>O</span>nce upon a time in a land far, fary away there lived a bad-assed martial artist named Bruce Lee. He ruled all of the land with an iron fist and was known to round kick ugly babies on sight. One year a guy with a dumb beard and too much plastic surgery named Chuck Norris came to visit him. Seeing how hideous the red-haired fiend was, Bruce Lee crane kicked him so hard he turned into Mr. T and went on to enjoy a modicum of fame.</p>
<p>The End</p>
</body>
</html>
We could of course also float some text to the right:
<html>
<head>
<style type="text/css">
span
{
float:right;
width:0.8em;
font-size:200%;
font-family:times;
line-height:80%;
border: 1px solid black
}
</style>
</head>
<body>
<p>
<span>Bruce: <i>A Life Story</i></span>Once upon a time in a land far, fary away there lived a bad-assed martial artist named Bruce Lee. He ruled all of the land with an iron fist and was known to round kick ugly babies on sight. One year a guy with a dumb beard and too much plastic surgery named Chuck Norris came to visit him. Seeing how hideous the red-haired fiend was, Bruce Lee crane kicked him so hard he turned into Mr. T and went on to enjoy a modicum of fame.</p>
<p>The End</p>
</body>
</html>
Next: Creating a Menu >>
More Style Sheets Articles
More By James Payne
