Preface:

Last month (slightly before I decided to reinstall my operating system), I started the tedious process of organizing the files on my computer and happened across a number of old poems I had written. While I have been a leisure poet since high school (although I have never been one to publicly share my poetry much until now), I was faced with a bit of a dilemma because of the odd graphical nature that accompanies poetic verses and the ability to replicate such graphical structures within HTML.

Conversely, while I must confess that I have never been particularly graphically inclined (or at least my vision of artistic beauty is substantially different than that of the general populace); however, after searching the web for a reasonable amount of time looking for an appeasing CSS solution (to my poetry formatting problem) I came up empty-handed (for the most part) and decided to try my hand at creating a successful CSS implementation on my own.

Likewise, of all the CSS formatting styles I did encounter during my Internet search, I determined (based upon this search) that I liked having a large capital letter at the start of each stanza (of the poem), enjoyed seeing a slight offset between the first line (capital letter) and the remainder of the stanza, and (for the most part) was not particularly fond of line numbers but possibly wanted the capability in the near future. Conversely, based upon such desires I knew that my CSS solution should focus predominantly upon using ordered / unordered list elements for each line of the poem.

The CSS Code:

Thus, to begin, I started with a simplistic CSS class selector in order to encapsulate elements within a div to prevent style leakage, as shown by:

.poem
{
    /* Configure your background, layout, etcetera here */
}

were I kept this class mostly empty (by virtue of the layout i was using) but your requirements will likely be different.

Next, because list elements are being utilized for each line of the poem (either numbered or unnumbered), I decided to disable my list elements ability to utilize a preceding bullet (noting that some minor modifications of this attribute can permit line numbering), as shown by:

.poem ul, .poem ol
{
    list-style-type: none;
}

Likewise, I then modified the list item elements style in order to make the spacing and font appear more poetic, as shown by:

.poem li
{
  font-family:Times New Roman;
  font-style:italic;
  padding-bottom: 0.1em;
}

and since such modifications are relatively straightforward, changes can be made readily.

Next, because I utilize a preprocessor HTML language (or in other words I use a combination of Markdown and my own custom macro language) line breaks and non list elements between stanzas are converted (by markdown) into paragraph <p></p> elements and can be stylized (if needed) by:

.poem p
{
    /* Configure your poem paragraph here */
}

which you may (or may not) need depending upon your website style.

Conversely, in order to stylize the first letter in every stanza, the following code:

.poem li:first-child::first-letter
{
  font-size:26px;
  font-style:italic;
  padding-right:3px;
}

can be utilized to achieve such results. Likewise, a slight indentation between the first line and the remainder of the stanza lines can be obtained by:

.poem li:not(:first-child)
{
  margin-left: 26px;
}

(noting that the CSS not operation is not supported in all browsers, so precautions should be taken if legacy browser support is required.

Conclusion:

Overall, while I am sure that a solid (more artistic) user interface developer could implement something a bit more stylish than I have here; however, the basic premise seems to work rather well since the markdown code:

* Roses are red,
* Violets are blue.
* This is CSS poetry,
* Nicely rendered for you!

<p></p>

* Browser are Evil,
* While CSS is Good.
* My Code is Crazy,
* Yet it works really Good!

(neglecting my custom macros) turns into the following HTML code:

<div class="poem">
    <ul>
        <li>Roses are red,</li>
        <li>Violets are blue.</li>
        <li>This is CSS poetry,</li>
        <li>Nicely rendered for you!</li>
    </ul>
    <p></p>
    <ul>
        <li>Browser are Evil,</li>
        <li>While CSS is Good.</li>
        <li>My Code is Crazy,</li>
        <li>Yet it works really Good!</li>
    </ul>
</div>

and renders as:

Noting that a few minor variations of the code above can yield an almost infinite number of variations.

Enjoy!