Fancy

Tags In Less Than 5 Minutes

During this post we will explore using CSS to style the HTML <blockquote> tag. The <blockquote> tag is used to define a long quotation. This is content that your design should emphasize in your web page. The effect that we are trying to achieve looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

HTML

The markup that is shown above is the following:

<blockquote>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget
        ligula molestie gravida. Curabitur massa. Donec eleifend, libero
        at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit
         sit amet quam. Vivamus pretium ornare est.
    </p>
</blockquote>

Strictly speaking the <p> tags inside the block quote are not necessary HTML elements for the single paragraph above. However they are required in order to achieve the above effect. They are also required if you intend on having quotes with multiple paragraphs. In my case, Windows Live Writer adds <p> tags automatically. In either case, the HTML is semantic and clean.

CSS

The styles that create the above effect are the following:

blockquote
{
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    border: solid 3px #333;
    background: #444 url(images/quote.png) no-repeat scroll 10px 10px;
}

blockquote p
{
    margin: 0 0 10px 0;
    padding: 0 33px;
}

blockquote p:last-child
{
    margin: 0;
    background: transparent url(images/quote.png) no-repeat right bottom;
}

The <blockquote> tag’s width is set to 80% of the parent and then it is centered using the margin style. I added a bit of padding between the text and the borders. A 3 pixel wide solid border helps set off this text from the rest. Finally a background style sets the background color and positions the upper-left quote.

Every <p> tag inside the <blockquote> then is styled with bottom margin (spacing between paragraphs) and a bit of side padding to ensure the text does not overlap the quote graphics.

The last <p> tag places the bottom-right quote image. The images are placed symmetrically by the elements using the 10px settings in the above CSS.

Graphics

I used Paint.NET to create the quote graphics. Very simple process. Choose a large font size and type the quote character on the drawing surface. Sift through the available fonts until you find one that you like. Make sure you have a transparent background and a color that fits into your theme. Here is my quote graphic (slightly enlarged):

Summary

I have been meaning to add a <blockquote> style to my blog for a while. It is was easy enough to do. I thought I would share the technique. Now I will have to start having more long quotations.