Feature
Post

Category
Design


Styling photo captions with CSS

Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS:

Now I won’t delve too deeply into how to code your captions. Some people do it this way:

<p><img src=”image.jpg” alt=”image” /><br />Caption text here</p>

But apparently the proper, semantic way would be to use a definition list, like so:

<dl>
<dt><img src=”image.jpg” alt=”image” /></dt>
<dd>Caption text here</dd>
</dl>

where:
dl = definition list
dt = definition term
dd = definition definition

Got that? Okay, let’s prettify it with some CSS. I want to caption a photo of a nicely sharpened pencil. Here’s the screenshot of what I want:

tutorial-captions

And here’s how to accomplish it:

HTML:

<dl>
<dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt>
<dd>I love the smell of freshly sharpened pencils</dd>
</dl>

CSS:

.photographs dt {border:1px solid #ccc;font-size:82%;}
.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

Me, I like my captions plain and simple- I think the photos should stand out more than the captions. But once you know what you can do, you can basically go wild. For example, replacing the dd style with this:

.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

will give you this:

tutorial-captions-2

You gotta love CSS.

How do you like to caption your photos?


  1. By Boris Strahija posted on January 7, 2010 at 1:47 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Why would you use a list element with only 1 list item? It just doesn’t feel right.

  2. By Craig posted on January 24, 2010 at 3:13 am
    Want an avatar? Get a gravatar! • You can link to this comment

    It never worked for me?? Do you need to paste all this code in a html widget with this in front of it

    .photographs dt {border:1px solid #ccc;font-size:82%;}
    .photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

  3. Trackback45 Powerful CSS/JavaScript-Techniques - Smashing Magazine45 Powerful CSS/JavaScript-Techniques | Programming Blog45 Powerful CSS/JavaScript-Techniques « Social-Press45 Powerful CSS/JavaScript-Techniques | Tutorial51Styling photo captions with CSS | Devlounge | CSS Guru How to CSS45 Powerful CSS/JavaScript Techniques « Extreme Design Studio Blog v4.045 Powerful CSS/JavaScript-Techniques » Shai Perednik.comimgAreaSelect jQuery plugin | WebDesignExpert.MeTechStyle by Jargal.MN » Blog Archive » CSS45 Powerful CSS/JavaScript-Techniques | Vectordump