TGP Tutorials & Articles
Using CSS to Border Your Thumbnails
by TGPFactory Staff, June 6 2006
There are two methods depending upon whether you want the border style to apply to all thumbs or just one image. For one single image:
<a href=""><img src="thumbnail.jpg" style="border: 1px dashed #f0f0f0;" border="0"></a>For a series of images, you would setup a stylesheet. In the simplest terms, a stylesheet directs HTML web pages in how text and links appear - font size, face, color, etc. etc. Your stylesheet (a regular text file saved as "style.css" and uploaded on your server to the same place your HTML web page is) would look something like this:
a.thumb:hover img { border: 1px dashed #f0f0f0; }
a.thumb img { border: 1px solid #f0f0f0; }
The stylesheet would be called via the HTML web page's header:
<html>
<head>
<title>Sample Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
And the style with a dashed border could be utilized somewhere in the page with the code:
<a href="" class="thumb"><img src="thumbnail.jpg" style="border: none;"></a>
