How to add a clear caption to your image, AND format it exactly how you want!

Ever want a fancy caption with your own chose colors, sizes, fonts, border thickness, etc underneath a picture? There’s an easy way to do so using your CSS style sheet, some HTML, and creativity!

First of all, let’s set up your CSS.
Eventually your coding will look like this:


CSS Code

Let us go over each part of the code so you are not blindly copying and pasting.

The .img-desc block describes different aspects of your image that you are captioning such as its alignment, position, display, height, and width.

Alignment is usually either centered, to the right, or to the left, however you like! Simple enough right?

The display option lets you decide how a certain HTML should be showing up on your page.
Click here to explore the different display options you can use.

Positioning explores how your element should show up relative to the rest of your webpage. 
Click here to explore the different positioning options you can use.

The height and width can be set to your liking, just play around a bit!

The .img-desc cite block describes different aspects of your caption such as its background color, filter and opacity, text color, padding, border, and position.

Set your border for you caption how ever thick you would like by identifying it’s pixels, then set it’s color and type as well. Type means solid, dashed, etc. I would choose a simple solid, thin border for the most part.

Padding defines the space between the element border and the element content. It clears an area around the content and inside the border of an element.

Background color and text color are self explanatory, just insert any color you want using it’s specific code. On dreamweaver  when you click the space bar after the colon bar in “color: ” a color pallet should come up- choose any colors you want!
Make sure the two don’t clash! Click here for a website that can help you with color matching.

Filter and opacity part of the code here basically sets the opacity, or transparency effect of the caption. The higher you number, the more your effect is implemented

We already went over position!

Secondly, let’s set up your HTML.
Eventually your coding will look like this:



Note how the dic class is specified and the <cite> ‘s around the caption text. Remember the cite aspect of our CSS?!

With all my coding seen above, my final product looked liked this!!!!

Final Product


Hope this helps in your website making!
~Surabhi Menon 

~ by surbss on October 30, 2011.

One Response to “How to add a clear caption to your image, AND format it exactly how you want!”

  1. I feel this was a good blog post because not only did you show us what your coding should be, you also explained each aspect of it. I don’t think I could have gotten the code from your explanations but without them, I would not feel the need to learn; just copy and paste every time. Each aspect of your CSS was explained explicitly to help us fellow bloggers learn aspects of cascading style sheets.

    Mairead Lynn

Comments are closed.

%d bloggers like this: