Well, the relevant section of the source code on your page looks like this:
- Code: Select all
<div id="imageinfo" class="imageinfo">
<h3 class="title"><span class="title">IMGP2895w.jpg (title)</span></h3>
<h3 class="location"><span class="location">location</span></h3>
<div id="imagecaption" class="imagecaption">
<p class="caption">
Caption
</p>
</div>
...
You can see that each of the items you asked about is wrapped by several tags. EG the title is inside a SPAN of class "title" which is inside a H3 of class "location" which is inside a DIV of class "imageinfo" (along with the caption and location).
This gives you several ways of controlling the display of image info. The most reliable way is probably to use the innermost elements, something like this:
span.title
{
font-size: 15px;
}
span.location
{
font-size: 10px;
}
p.caption
{
font-size: 9px;
}
See also
this thread.