CSS Trick: Paragraph Indenting
Here’s another simple :CSS: trick: automatically indenting paragraphs like I have in my entries. It’s really simple to indent all your paragraphs:
p {
text-indent: 1.2em;
}
That code will simply indent every paragraph on your site. You’ll notice here, though, that the first paragraph of my entries is not indented; only following paragraphs. In order to get that effect you need to use an adjacent sibling CSS selector:
p+p {
text-indent: 1.2em;
}
What this code does is apply the style to any paragraph (<p>) that immediately follows another paragraph. In my own case, however, I only wanted the style effect applied to the actual weblog entries; I didn’t want it appearing in other places like the sidebar where you might also find multiple paragraph tags in a row. To achieve that, I simply used a standard decendant CSS selector by applying the style only to adjacent paragraphs that were inside the element with the “main” CSS ID:
#main p+p {
text-indent: 1.2em;
}
Posted Monday February 16, 2004 in CSS Tricks by Chris Curtis
This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.