Blockquotes with Image Quotes

Sometimes we like to add an image to the blockquote style. For this one we added the quote image named quote.gif to the blockquote tag and added the unquote image unquote.gif to the paragraph <p> tag.

This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too by adding another image named unquote.gif.

We only have to add the style sheet code once. Then we can automatically put the quotes in the blockquote by typing in the class name like this.


<blockquote class="withquote">
<p class="withunquote">
The quote goes here
</p>
</blockquote>

CSS Blockquote in Style Sheet

Copy and paste this CSS in your style sheet.

Copy and paste this in your Blog or Web page.

It will look something like this.

This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too by adding another image named unquote.gif.

Instant CSS Blockquote with Images

This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.

Copy and paste this CSS in your style sheet.

It will look something like this.

This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.

CSS Blockquote in Color

Update: Here are a few more colors. Right-click on the image to save it.

If any of you have a good selection of blockquotes or the tools to make a good set please share them with us.