Source Code is:
<head>
<style>
blockquote{background:transparent url(quoleft.gif) left top no-repeat;}
blockquote .blockDiv{padding:0 48px;background:transparent url(quoright.gif) right bottom no-repeat;}
.blockDiv{width:300px;font:11px/1.1em Arial, Helvetica, sans-serif;color:#777;text-align:justify;}
</style>
</head>
<body>>
<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div class="blockDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</blockquote>
</body>
Download the blockquote source code from here
There’s a simple trick at work here. CSS backgrounds are extremely powerful but in CSS2 only one background can be applied to any single element. The blockquote effect requires two background images, one for the quote mark on the left hand side and one for the one on the right. The additional nested <div> </div> allows us to do this, by applying one background image to the <blockquote></blockquote> and one to the <div> </div>.
The padding is applied to the <div> </div> rather than the <blockquote></blockquote> because the <div> </div> needs to stretch the entire width of the <blockquote></blockquote> in order for the background image to appear in the right place. The images are 38 pixels wide, so a padding is applied to the left and right hand sides of the <div> </div> to allow space for the images and give an extra 10 pixels of whitespace.
You can see the technique being used by downloading the free source code from here.
