Pick up any paperback and look at the paragraph indentation. You’ll generally see that indentation isn’t used on the first paragraph after a heading, but is on the subsequent paragraphs. If there’s a big bold heading, it’s pretty obvious that a new section is beginning, but for the paragraphs after that, the indent acts as a visual clue, letting you easily see the organization. Here’s how to do that technique in CSS.
The trick we’ll use is the p+p rule. The plus sign in CSS means “immediately following”, so p+p means a p tag which comes straight after a p tag. This means that we can set paragraphs which don’t have a heading before them to indent. Paragraphs which follow a heading won’t be affected by this rule, but the next paragraph will be (since the tag before it is a p).
Here’s an example of the HTML code to use:
<h2>The secret history of animals</h2>
<p>This paragraph is coming straight after an h2 tag, so the p+p won't apply to it. The p+p rule only applies to a paragraph tag coming straight after a paragraph tag</p>
<p>This paragraph will be affected though, and so will another paragraph coming straight after it. It gives the paragraphs a very "designed" feeling, looking sleek and professional.</p>
<p>Here's the last paragraph, just to prove a point. If we put another heading, then a paragraph after it, that paragraph will pick up the same traits too.</p>
Here’s the basic CSS to use:
p+p { text-indent: 1em;}
you can also explicitely state that the ordinary p should have a zero indent:
p { text-indent: 0; }
but it’s not really necessary.
Heres how it looks (with a little more formatting added:
And here’s the full code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>p_plus_p</title>
<style>
* { font-family: Georgia; color: #333;}
div.box { width: 400px; }
p { line-height: 1.3em; font-family: Arial, sans-serif; font-size: 0.9em; color: #000;}
p+p { text-indent: 1em;}
</style>
</head>
<body>
<div class="box">
<h2>The secret history of animals</h2>
<p>This paragraph is coming straight after an h2 tag, so the p+p won't apply to it. The p+p rule only applies to a paragraph tag coming straight after a paragraph tag</p>
<p>This paragraph will be affected though, and so will another paragraph coming straight after it. It gives the paragraphs a very "designed" feeling, looking sleek and professional.</p>
<p>Here's the last paragraph, just to prove a point. If we put another heading, then a paragraph after it, that paragraph will pick up the same traits too.</p>
</div>
</body>
</html>