Don't care about how it's done? Copy the code below this blue box and replace the citation inside with your own. It should work in any HTML environment where in-line CSS is allowed.
<div style="border: 1px solid black; padding: 10px; padding-left: 64px; text-indent: -60px; background-color: cornsilk;">Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.</div>
This is what your code should look like once the page is live and you aren't looking at the HTML. The code adds a yellow background and a black outline along with a little bit of padding. If you don't like those aesthetic additions or want to learn how to change them, read on to customize the code snippet.
Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.
When you cite sources in an academic research paper, you will need to create in-text citations and then at the end of your paper, you will need to create a list of every source you used to write the paper. Depending on the citation style, some details about the list or the in-text citations may be different. However, many citation styles require a hanging indent which allows the authors of the works used in the paper to be easily and quickly found. To create a hanging indent in a word processor, see these instructions from Microsoft. To create a hanging indent on a webpage is a much different story. That's what this blog post is about.
By adding the 64 pixels of padding to the left, we shift the whole block of text to the right. It's not exactly an inch on every screen, but it'll do. This will stay indented no matter what size the screen is and will adjust as you make the window bigger and smaller. The first line still needs to be adjusted. That will be the next step.
<div style="padding-left: 64px;">Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.</div>
A whole block of text, all indented together.
Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.
The text-indent command doesn't recognize lines the way a word processor does and applies the indent to the text as if it were one long string. Good. That's what we want. It only adds an indent to the first line. We give this a negative value, pulling the first line back to the natural margin, but leaving the remaining lines (however many there are) as indented 64 pixels as we told it to do in the last step. We still have 4 pixels on the left which is a teeny tiny space. You can try it at -64 pixels if you like, but if you go too far you may end up off the screen.
<div style="padding-left: 64px; text-indent: -60px;">Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.</div>
A block of text indented, the first line at the natural margin.
Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.
The other three things I added are optional and I encourage you to tweak each of these things to your liking. When you add padding as a singular value, it adds the padding to the top, bottom, right, and left. I've added a value of 10 pixels which gives the whole thing a nice padded look. Here's the code that gives you padding all around:
To outline the box, I added a black border with one pixel's worth of thickness. Here's the code that adds that:
The next element I added was a background color. I did this so students could easily pick out the citations on our website. The line I added in the in-line CSS is:
but you can change cornsilk to any of the color names listed on the X11 color names list. I've linked to the X11 color name list on Wikipedia below. Additionally, you can replace the word cornsilk with a hexcode, a six digit mix of numbers and letters that represent web colors. I've linked to the hex code for cornsilk below as well.
A block of text indented, the first line at the natural margin, a background color, 10 pixels of padding all around, and a pixel's worth of black border.
Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.