CSS Quotation Marks for Blockquote

 

Check this out! Quotation marks that are part of the blockquote tag so they are always positioned correctly no matter how much content is put in.

This is a simple technique but very effective. It uses a background image for the blockquote tag to position the first 'opening' quotetation mark and the same within a paragraph tag within it to position the 'closing' quotation mark. Because the <p> tag is within the <blockquote> it inherits the appropreate style.

 

The style sheet looks like this.

 

blockquote {
background: transparent url(../images/bq_left.gif) left top no-repeat;
margin: 5px 20px 10px 20px;
padding-left: 50px;
}

blockquote p {
background: url(../images/bq_right.gif) right bottom no-repeat;
margin: 0;
padding-right: 50px !important;
}

 

The html looks like this

 

<blockquote>
<p>Check this out! Quotation marks that are part of the blockquote tag so they are always positioned correctly no matter how much content is put in.</p>
</blockquote>