Indent paragraph - handy css trick

Indent paragraph - handy css trick

p{ text-indent: 20px; margin-bottom:0; }
p + p{ text-indent: 0; margin-top: 0; }


Sometimes you want to give the first paragraph a different look from the other paragraphs on your page. You might want to indent it, or give it a bold or italic font.

This is actually very simple to achieve. You can do this by giving a 'normal' paragraph the layout you want for the first paragraph. The other paragraphs are styled by using the 'p + p' tag, which means only those paragraphs that follow other paragraphs will use this layout.

Another thing you could do is change the spacing for the first paragraph only (for example no bottom margin).

Example

p{ text-indent: 20px; margin-bottom:0; }
p + p{ text-indent: 0; margin-top: 0; }

<p>This is the first paragraph.</p>
<p>The text continues here.</p>

This is the first paragraph.

The text continues here.

Tags: (Indent paragraph | style paragraph)

• Twitter: Indent paragraph - handy css trick
• Stumbleupon
• Google
• Linked In