Using classes and CSS overrides to create an alternate pull quote

Required files pull-quote.html and pull-quote.css from the chapter 3 folder.
What you’ll learn How to use CSS classes to create alternatives to the default pull
quote. In this example, you’ll create a narrow pull quote that floats
to the right of the body copy.
Completed files pull-quote-2.html and pull-quote-2.css from the chapter 3
folder.

1. Amend the HTML. First, add a class to the blockquote element so that it can be
targeted in CSS:
<blockquote class="floatRight">
2. Position the blockquote. Create a new CSS rule that targets the blockquote from
the previous step by using the selector blockquote.floatRight. Set float and
width values to float the pull quote and define its width.
blockquote.floatRight {
float: right;
width: 150px;
}
3. Remove the quote mark background image by setting background to none. Add the
two border property/value pairs shown to visually separate the pull quote from its
surroundings, drawing the eye to its content.
blockquote.floatRight {
float: right;
width: 150px;
background: none;
border-top: 5px solid #dddddd;
border-bottom: 5px solid #dddddd;
}
4. Add padding and margins. First, add vertical padding to ensure that the pull quote’s
contents don’t hug the borders added in the previous step. Next, define margin
values, overriding those set for the default blockquote from the previous exercise.
Because this alternate pull quote is floated right, there’s no need for top and right
margins, hence them being set to 0; the bottom and left margin values are left
intact.
blockquote.floatRight {
float: right;
width: 150px;
background: none;
border-top: 5px solid #dddddd;
border-bottom: 5px solid #dddddd;
padding: 10px 0;

}
5. Override the paragraph styles. The background and padding settings for the default
blockquote style are no longer needed, so they’re set to none and 0, respectively.
Finally, text-align is set to center, which is appropriate for a narrow pull quote
such as this.
blockquote.floatRight p {
text-align: center;
background: none;
padding: 0;
}