Let's apply some classes to our project site. First, we'll need to add the style rule shown above to the style sheet we're working on:
- Open
style1.css and add the CSS from the above block to the bottom of that file.
- Save
style1.css, then open about.html.
- Find the paragraph that's contained inside the blockquote element.
- Add the
class="fun" attribute to the paragraph's opening tag.
This is how your markup should look right now:
Example 3.18. about.html (excerpt)
<blockquote>
<p class="fun">"Happiness is a dip in the ocean followed by a
pint or two of Old Speckled Hen. You can quote me on
that!"</p>
</blockquote>
Note that the class attribute was applied at the paragraph level. If there were a few paragraphs in our man Bob's quotation, you'd end up with something like this:
<blockquote>
<p class="fun">"Happiness is a dip in the ocean followed by a
pint or two of Old Speckled Hen. You can quote me
on that!</p>
<p class="fun">"Join us for a weekend away at some of our
favorite dive spots and you'll soon be making new
friends.</p>
<p class="fun">"Anyway, about time I got on with some
<em>proper</em> work!"</p>
</blockquote>
There's a lot of repetition in there. Surely there's a tidier way to apply this style? There sure is!
<blockquote class="fun">
<p>"Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!</p>
<p>"Join us for a weekend away at some of our favorite dive
spots and you'll soon be making new friends.</p>
<p>"Anyway, about time I got on with some <em>proper</em>
work!"</p>
</blockquote>
Share and Enjoy:
