A Simple CSS Blockquote Class

Painted in 1865 for an exhibition where it was rejected by the jury, Bread and Eggs is a still life by Paul Cezanne.

Cezanne ignores the laws of classical perspective, allowing each object to be independent within the space of a picture while the relationship of one object to another takes precedence over traditional single-point perspective.

Metropolitan Museum of Art

We have styled quotes before. This is another twist on the same idea which is implemented commonly throughout the web. It's a simple blockquote class with three main parts. The dark bold introductory text which is followed by a picture, then the quote in italics and the quote attribution printed underneath it all. You can change the fonts, font sizes or colors anyway you want. If you don't want or have an introductory text, or an image you can leave them out by not including their markup.

Since I'm running these examples within the context of a blog layout, my selectors require more specificity thus "body div.quoted blockquote" instead of ".quoted blockquote". My widths, padding and margins may also mismatch your case. However, once you have the basic structure, those should be easy to tweak. Have a nice weekend.

The Markup:

<div class="quoted">

<!-- introductory text -->
<p class="summary2"><strong>The inset picture is </strong></p>

<blockquote>

<!-- quote image -->
<img src="..." />

<!-- actual quote -->
<p>Cezanne ignores ....</p>
</blockquote>

<!-- owner of quote -->
<p class="credit"><a href="....">Metropolitan Museum of Art</a></p>

</div>             

The CSS:

.quoted { width: 550px;  margin-bottom:25px;}
            .quoted,  .quoted p {
                line-height: 1.5em;
                font-size: 14px;
                font-family: sans-serif;
            }     
            .quoted p.summary2 {
              margin-right: 15px;
              padding-right: 38px;
            }
            .quoted p.credit, body div.quoted blockquote{
                 width: 75%;
                 margin: 10px 15px 10px 60px;
                 padding: 0 25px 0 35px;
             }     
            body div.quoted blockquote {
                border-left: 1px dashed #999999;
                color: #777777;
                font-style: italic;               
            }
            .quoted blockquote img {
                margin: 0;  padding: 0;
             }
            .quoted blockquote p {
                margin-bottom: 20px;
                width: 400px; /* width of image */
            }
            .quoted .credit a {
                color: #FFB303;
                text-decoration: none;
                font-weight: bold;
                }