Advanced Blockquote Techniques with CSS
Using CSS, you can create remarkable blockquotes that can be used to considerably enhance the look and feel of any quotes that you use, and draw your readers in to the article.
One particularly stylish method is to employ a small image within the blockquote section, typically an image of quotes. In order to create the blockquote look seen on the right, begin by opening a paint application, creating a text box and typing a single set of quotes. Choose the font that you want in order to style the quotes appropriately, size them up to about 14 pt and then color them to fit the rest of your website theme. Finally, shrink the image canvas down so that it focuses on your quotes and save as a GIF.
Next, you will need to create your CSS code for the blockquote element. As this element is strict HTML/XHTML, you only need to type the name in your CSS document, rather than prefix is with # as you might for a div.
The following CSS creates the blockquote seen in the accompanying image:
padding: 0 50px;
border: 1px solid #f0f0f1;
background: transparent url("path/to/blockquote.gif") no-repeat 0 0;
Obviously there are many variations you can try on this, such as altering the color, the font type and perhaps removing the border. You might also add the float property in order to push the blockquote to the left or right.
With these blockquote styling tips, you should be able to create a striking new look for your website!