Proper Paragraph Spacing and Indenting on Web Pages

This is a short article on how to setup the correct CSS in order to replicate the paragraph spacing and indenting displayed in a book on your web pages. It will also enlarge and embolden the first character in the scene.

The css code used is:

	div.story {
		width: 60%;  /* or use px or em for fixed width */
	}
	.story p {
		text-align: justify;
		text-indent: 50px;
		margin-bottom: 0;
		margin-top: 0;
	}
	.story p:first-child::first-letter {
		font-weight: bold;
		font-size: 2em;
	}

Simply wrap your story in a

<div class=story></div>

tag, and enclose each paragraph as usual in

<p></p>

pairs. The css can be located in a style sheet, or embedded in

<style></style>

tags in the page.

Example

“Professor Holberg, how nice to meet you at last”, Darius said, offering his hand across the desk. “You’re a hard man to get hold of”.

Holberg half rose from his seat and took the proffered hand. “I’ve been pretty busy of late,” he said by way of apology. “Moving around a lot too.” He waved Darius into a chair, re-seating himself in the process. “I’m not so old that I can’t use email. You could have explained what it is you need. You know that email was invented for the likes of me,” he added with a half smile. “What can I do for you Mr Darius?”

“I suppose I could have,” Darius agreed affably. “But then you’d think I was a crank and ignored me. I’m rather interested in your current research.”

The smile on Holberg’s face faltered for a moment. “I’m not a Professor anymore you know. I resigned my post at the university.”

“Indeed. Should I call you Dr Holberg then?” Darius crossed a leg and brushed an imaginary speck of dust from it.

“I’m not sure I like the fact that you know, or think you know, what I’m working on. Are you spying on me?”

Philip P. Ide

Table of Contents

Proper Paragraph Spacing and Indenting on Web Pages

Example