Indenting the First Line of Each Paragraph

To indent the first line of each paragraph set a style rule using text-indent. For example, the following code indents the first line of each paragraph 30 points. Copy this code into the <HEAD> section of your page:

<STYLE TYPE="text/css">
<!--
P {text-indent: 30pt;}
-->
</STYLE>

This code indents the first line of each <P ...> element, but you'll probably run into an annoying problem. If you're like most designers you probably don't put a P before the first paragraph or between a header like <H1 ...> and the text that follows it. Unfortunately, that's exactly what you'll need to do if you want the paragraph indented. The text in these situations is part of something called "anonymous blocks" and cannot be referred to directly. To indent it you must put the text in a <P ...> element.

So, for example, the following code does not have a <P ...> between the header and the text, so the text is not indented:

<H1>My Story</H1>
This paragraph is not indented.

which gives us

My Story

This paragraph is not indented.

This code does have a <P ...> between the header and the text, so the text is indented:

<H1>My Story</H1>
<P>
This paragraph is indented.

My Story

This paragraph is indented.





About the Author
Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.