Styling the Images

Now, we’ll style the image and the link that contains that image. For this example, we’ll
mimic a Polaroid-style photograph by using a white frame with a larger lower margin—a
great place to add a date or copyright statement. To do this, we’ll have an inset-style border
around the image, and then an outset-style border around that, as shown in Figure 2.4.
Here’s the code:
gallery.css (excerpt)
img {
display: block;
margin: 0 auto 5px auto;
border: 1px solid #ccc;
border-bottom-color: #eee;
border-left-color: #ddd;
border-top-color: #bbb;
}
p.photo {
margin: 0 0 10px 0;
float: left;
width: 75%;
text-align: center;
background-color: #fff;
line-height: 1em;
}

p.photo a {
display: block;
float: left;
margin: 0;
padding: 4px 4px 9px 4px;
border: 1px solid #ccc;
border-top-color: #eee;
border-right-color: #ddd;
border-bottom-color: #bbb;
background-color: #fff;
text-align: center;
}
p.photo a:hover {
border-color: #ccc;
background-color: #eee;
}
p.description {
clear: left;
}

The definition of separate colors for each side gives the border on the image the desired
inset look. We could have used the inset border-style that CSS already provides, but the
colors for the light and dark borders differ between browsers.
To create the look we want, we use a 1px, solid border, and specify #ccc as its color.
We use a slightly lighter shade (#ddd) for the right border, and darker shades for the
top (#bbb) and left (#eee) borders. The result fools the eye into seeing a threedimensional
edge.
The addition of a 5px margin to the lower edge distances the outside border from the image.
It’s aesthetically pleasing to have a larger space on the bottom than around the sides, and it
works well with the Polaroid-style look we’re trying to create.
The link that contains the image has a solid border of 1px, which uses the same colors as
before, although they’re reversed to create an “outset” look (we’ve switched the top and
bottom colors, and the left and right colors). We also add a padding of 4px. This padding,
plus the 1px border we’ve added to the image and the 1px border we’ve applied to the link,provides us with the 6px value that we’ve applied for the h1’s and paragraph’s margins, and
helps the edge of the text line up with the image, instead of the outside border.
To ensure that the outside border that’s applied to the link containing the image snaps
snug to that image, we float the paragraph and link to the left, and apply a 75% width to the
paragraph. This width is a workaround that was developed for Internet Explorer to avoid
the outside border filling the entire width of the page in that browser; the page still renders
as expected in other browsers.
Next we’ll add some hover styles: a subtle, light gray background, and one color for the
border for all four sides. The description paragraph is then set to clear: left, to clear the
float from the above-image paragraph.