[Jellby]

Originally Posted by omk3

If p.anything overrules simple p, then obviously I don't need them at all.

It does. More specific selectors override less specific ones, much like "div.firstp p" overrides a bare "p".

I also had some small poems in later stories, which need different handling too. I had them in <div class="poem"> tags, but I guess <p class="poem"> would suffice. What would I need a <div> tag for, then, I wonder... I'll probably find out with experience.

Poems are a nasty dusty beast

For simple poems, you don't need much, indeed. But when you start having different indents and long lines (which you'd like to wrap nicely), things start to get complicated. My personal way of dealing with poems is something like:

<div class="poetry">
<div class="stanza">
<p>How doth the little crocodile</p>
<p class="indented">Improve his shining tail,</p>
<p>And pour the waters of the Nile</p>
<p class="indented">On every golden scale!</p>
</div>

<div class="stanza">
<p>How cheerfully he seems to grin,</p>
<p class="indented">How neatly spread his claws,</p>
<p>And welcome little fishes in</p>
<p class="indented">With gently smiling jaws!</p>
</div>
</div>

with:

div.poetry {
  margin: 1em 0 1em 2em;
  font-style: italic;
}
div.stanza {
  margin: 0.5em 0;
  page-break-inside: avoid;
}
div.poetry p {
  margin: 0;
  text-align: left;
  padding-left: 5em; 
  text-indent: -5em;
}
div.poetry p.indented {
  margin-left: 1.5em;
}

The combination of margins, paddings, and text-indent allows me to indent the whole poetry block, have additional indent for the "indented" class (I have also "indented2", "indented3", etc. if needed), and let the wrapped portions of a line (if it gets wrapped) be further indented (ideally they would be right-aligned, with a "[" before them, but that's simply not possible with CSS). Sometimes I think I should use <div> instead of <p> in poetry, but <p> is shorter