Creating a Thumbnail Gallery

First of all, you will need a series of thumbnail images and captions. Each thumbnail image and caption will be placed inside a <div> element. The caption will then be placed inside a <p> element as shown in Listing 12.1.

To make sure you don't target every <div> on the page, you should apply the same classname to each one.

Listing 12.1. HTML Code Containing the Markup for a Thumbnail Gallery

<div >     <img src="/books/3/463/1/html/2/chapter12c.jpg" alt="">     <p>A flower from my garden</p> </div> <div >     <img src="/books/3/463/1/html/2/chapter12c.jpg" alt="">     <p>White and pinkflower in Spring</p> </div> <div >     <img src="/books/3/463/1/html/2/chapter12c.jpg" alt="">     <p>Flower in morning light</p> </div> <div >     <img src="/books/3/463/1/html/2/chapter12c.jpg" alt="">     <p>A close-up of flower petals</p> </div> <div >     <img src="/books/3/463/1/html/2/chapter12c.jpg" alt="">     <p>A timeless flower </p> </div> 

You will be using three selectors in this lesson. The first selector will target any <div> that contains a "thumbnail" class.

The second selector will target any image inside a <div> that contains a "thumbnail" class.

The third selector will target any <p> element inside a <div> that contains a "thumbnail" class. The selectors are shown in Listing 12.2.

Listing 12.2. CSS Code Showing the Selectors for Styling the Container

div.thumbnail {...} div.thumbnail img {...} div.thumbnail p {...}