CSS for MLA and APA Style Works Cited Entries

This is a useful bit of CSS I came across for getting the hanging indent working correctly for Works Cited or Reference entries in HTML. Here’s the CSS:

p.reference {
padding-left: 2em;
text-indent: -2em;
}

Now the HTML, for example:

<p class="reference">Sturluson, Snorri. <em>The Prose Edda: Norse Mythology</em>. Trans. Byock, Jesse L. London: Penguin, 2005. Print.</p>
<p class="reference">Tennyson, Alfred Lord. <em>Idylls of the King</em>. New York, New York: Penguin Putman Inc, 1983. Print.</p>

Generates…

Sturluson, Snorri. The Prose Edda: Norse Mythology. Trans. Byock, Jesse L. London: Penguin, 2005. Print.

Tennyson, Alfred Lord. Idylls of the King. New York, New York: Penguin Putman Inc, 1983. Print.

Alternatively, you can do this styling in-line with your

tags as follows:

<p style=”padding-left: 2em; text-indent: -2em;”>Sturluson, Snorri. The Prose Edda: <em>Norse  Mythology</em>. Trans. Byock, Jesse L. London: Penguin, 2005. Print.</p>

And you still end up with …

Sturluson, Snorri. The Prose Edda: Norse Mythology. Trans. Byock, Jesse L. London: Penguin, 2005. Print.

Thanks to the work done on this page for the help here. Happy trails :)

Leave a Reply

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑