Styling the source Class

Styling the source Class

Now that the <blockquote> and paragraph elements are styled, you can focus on the paragraph classed with source. This paragraph will be used to place the second background image in the bottom-right corner of the block quote.

A shorthand declaration can be used to set the image, repeat, and positionbackground: url(lesson13a.gif) no-repeat 100% 100%. The x and y axis must be set to 100% to place the bottom-right edge of the image in the bottom-right corner of the paragraph. no-repeat should be used to stop the image from repeating under the text. The background image is shown in Figure 13.4.

You will need to apply padding-bottom: 30px to the paragraph to push the text up 30 pixels and stop it from sitting on top of the background image.

The top image sits 5px in from the top and left edges of the <blockquote>. To achieve the same result on the bottom, apply a 5px margin to the right and bottom of the source class paragraph using margin: 0 5px 5px 0.

Finally, the source text can be differentiated from other block quote text by aligning it to the right and making it italic. This can be achieved with text-align: right and font-style: italic as shown in Listing 13.5. The results can be seen in Figure 13.5.

Listing 13.5. CSS Code Styling the source Class Paragraph

blockquote
{
    margin: 1em 0;
    border: 1px solid #ddd;
    background: url(lesson13.gif) 5px 5px no-repeat;
    padding-top: 30px;
}

    blockquote p
{
    padding: 0 70px;
}

blockquote p.source
{
    background: url(lesson13a.gif) no-repeat 100% 100%;
    padding-bottom: 30px;
    margin: 0 5px 5px 0;
    text-align: right;
    font-style: italic;
}