In the last chapter, you created a stylesheet called styles.css, and in this chapter you will add a number of CSS styling rules to it. But before you get started adding styles, you need to set up your HTML with targets for your styling rules to refer to.
You are going to add class attributes identifying the span elements with the otters’ names as “thumbnail titles.”
class attributes are a way to identify a group of HTML elements, usually for styling.
Your “thumbnail title” class will allow you to easily style all the names at once.
In index.html, add the class name thumbnail-title as an attribute of the
spans inside the li elements, as shown:
...
<ul>
<li>
<a href="#">
<img src="img/otter1.jpg" alt="Barry the Otter">
<span>Barry</span>
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter2.jpg" alt="Robin the Otter">
<span>Robin</span>
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter1.jpg" alt="Maurice the Otter">
<span>Maurice</span>
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter4.jpg" alt="Lesley the Otter">
<span>Lesley</span>
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter5.jpg" alt="Barbara the Otter">
<span>Barbara</span>
<span class="thumbnail-title">Barbara</span>
</a>
</ul>
...
In a moment, you will use this class name to style all the image titles.