Code:
<div class="poetry">
<div class="stanza">
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line in">Who dearly loved me</div>
<div class="line">There lived a lady in Scotland,</div>
<div class="line">An she's fa'n in love wi an Englishman,</div>
<div class="line in">And bonnie Susie Cleland is to be burnt in Dundee</div>
</div>
<div class="stanza">
<div class="line">The father unto the daughter came,</div>
<div class="line in">Hey my love and ho my joy</div>
<div class="line">The father unto the daughter came,</div>
<div class="line in">Who dearly loved me</div>
...
</div>
</div>
Code:
div.poetry {
margin: 1em 0 2em;
text-align: left;
}
div.poetry div.stanza {
margin-top: 0.5em;
}
div.poetry div.line {
padding-left: 3em;
text-indent: -3em;
}
div.poetry div.in {
margin-left: 2em;
font-style: italic;
}
I've decided against using "<p>" in poetry, since lines are not paragraphs, although "<p>" is more convenient than "<div class="line">", but the latter behaves nicer when the CSS is not supported at all.