Poetry in CSS: An Example

In this article we will provide a simple, but hopefully useful illustration of how CSS can be used to provide style for a plain text document.

We also hope to show that geeks are sensitive people with an appreciation for fine poetry!

To do this we will excerpt a few verses from The Rime of the Ancient Mariner.

The text: The Rime of the Ancient Mariner

The Rime of the Ancient Mariner

And some in dreams assur’ed were
Of the Spirit that plagued us so;
Nine fathom deep he had followed us
From the land of mist and snow.

And every tongue, through utter drought,
Was withered at the root;
We could not speak, no more than if
We had been choked with soot.

Ah! well a-day! what evil looks
Had I from old and young!
Instead of the cross, the Albatross
About my neck was hung.

Samuel Taylor Coleridge – 1797
(an excerpt)

Although entered here as plain text we should note that this text is displayed with the CSS rules, fonts, color, etc. inherited from our own web site. All that we have added is a surrounding <div> structural element in order to indent it from the normal left edge of our text.

The style: Some CSS rules

(Note: It is not important that you read and understand all the CSS rules that follow – this is not a how-to. But we wanted to include them all so that you could see the actual form and scope of the rules used in the example. Skip directly to the results if you like!)

We want to present this poem in a more pleasing manner, and in a way that will set it off from the surrounding page. Because style rules are inherited by elements that are contained inside others, we will use our <div> as the container for our text.

First, we want it to appear in a text style that is distinct from our normal font, so we will add the following rule to out <div> container:

And we will provide a background graphic which we have prepared, taken from a specialty edition of the poem that we happen to own. So we add the following CSS rules to our container…

To set it all off from the surrounding page we adjust the margins around our <div> container…

After a little experimentation we found that we would like the text to begin 120 pixels down from the top of the background image, 80 from the right and 45 from the left, so we add a rule for that also…

Next, we need to set the title line to a larger text size than the body of the poem, and with a slight sea-green tint with this…

The result: Poetry in CSS!

What you see here is the unaltered text you saw at the top of this article, but with a few CSS rules applied. We hope that you like it!