Links, Text, and Custom Fonts - Jump Start CSS - page 121

There aren't any new properties here, but we have added a new rule set, targeting <span>
elements inside paragraphs in the .media blocks. Why did we include this? Figure 4.10
shows us how the original design looks for each .media element in the “Latest Recipes”
section.
Figure 4.10. A single “Latest Recipes” entry from our original design
Notice that the number indicating the minutes for cooking time is bigger than the rest of the
text. With CSS, there's no way to target a specific section of a piece of text that is in the
middle of a block of text, so here's what we've done in our HTML:
<div class="media">
<a href="#">
<img src="images/haddock.jpg" alt="Haddock skewers">
<h2>Zesty Smoked Haddock Skewers</h2>
<p>Cooking time: <span>20</span> minutes</p>
</a>
</div>
Notice the <span> tags wrapped around the number. By doing this, we now can style that
part of the text in any way we want. In this case, increasing the font size does the trick.
We also want to give the text for our two button elements the correct size and color, so let's
do that now: