Blockquote Style - Quotations with Background Images
Find out how to construct blockquotes using background image quotation marks. Position the blockquote background images perfectly using CSS and some clever techniques and discover how to use the blockquote tag effectively with the correct usage of blockquote code.
I highly recommend that you watch a Dreamweaver video tutorial explaining how to position blockquotes using CSS. The video tutorial will show you the basics and you can come back to this page for further blockquote styling and blockquote code examples.
I’m always looking for quotation marks and speech marks and other symbols to help make my web design projects look great. Finding great looking speech marks is difficult, so I trawled the internet to find a good collection of quotation marks and they are available to download for free to accompany this Dreamweaver tutorial. You can also see some of the quotation marks used in the blockquote examples at the bottom of this webpage.
Whats in the Blockquote Tutorial Download?
There are a collection of 15 pairs of different style speech marks, 2 large single open quotes and a pair of very small quotation marks. Most of the speech marks are in the sample picture opposite with different styles to suit different tastes. These are all transparent PNG's and will fit onto any webpage:
Here is the main blockquote example we will be using in this tutorial. If you have downloaded the free quotation marks then these are opening and closing quotes number '14'
1. The HTML for the Blockquote
The W3C ask for quotes to go into a quote tag or blockquote tag and the standard blockquote will have a default margin indent which will be removed later when the blockquote style is added to the CSS document. The quote is placed inside of a paragraph tag. Below is a sample blockquote and you can copy and paste the example into your web design project and replace the text as required.
<blockquote>
<p>
Sweden is the home of my ancestors, and I have
reserved a special place in my heart for Sweden.
</p>
</blockquote>
2. Styling Blockquotes with CSS
Styling blockquotes using the methodology that I show you in this tutorial, requires that we attach a closing quotation mark background image to the blockquote tag and an opening quotation mark image to the paragraph tag.
Styling CSS Blockquotes is relatively simple but many people can find it difficult to position the closing quotation marks. It is recommended that you remove the margins from the css blockquote and the paragraph tag so that positioning the background images will be less troublesome.
The blockquote background images will repeat when attached using CSS so a ‘no-repeat’ is set. The opening quotation mark is easy to position on the paragraph tag and a simple ‘left’ and ‘top’ property will suffice.
The CSS blockquotes closing quote image positioning is different. Best positioning is achieved using X and Y coordinates. 200 pixels had been specified along the X-axis 200px and ‘bottom’ on the Y-axis. There are many different ways to position these elements however as you will see in the blockquote examples further below.
blockquote {
margin:0;
background:url(images/closeQuote.png);
background-repeat:no-repeat;
background-position: 200px bottom;
width:250px;
}
blockquote p {
margin:0;
background-image:url(images/openQuote.png);
background-repeat:no-repeat;
background-position:left top;
padding:20px 45px 30px 50px;
}
When setting a blockquote style I usually attach a width property to the blockquote tag and in this particular blockquote example a width of 250px has been set.
Padding has also been set using a concatenation of a selector to save typing padding-left and padding-right etc. The paragraph has been nudged into position using padding and you should experiment to get the positioning of your blockquote just right. The styling of blockquotes really starts to come to life when specifying the blockquote style using padding. See below for a better understanding of the padding selector.
Blockquote Padding selectors explained
This is a concatenation of a padding selector. It is made up of the padding properties: padding-top, padding-right, padding-bottom and padding-left. To remember the order I usually think of a clock face and have the ‘top’ at 12 O’clock and go clockwise around it. The sequence is top, right, bottom and left. Easy! I recommend that you write this selector onto a piece of paper and stick it on your wall.
3. Examples of Blockquote Styling and Code
The speech marks have been positioned beside the text rather above and below the paragraph..
The background position of the close quote has been altered along the X-axis and instead of positioning the blockquote at the bottom, a percentage of the blockquote length has been set at 80% .
blockquote {
margin:0;
background:url(images/closeQuote11.png);
background-repeat:no-repeat;
background-position: 210px 80%;
width:320px;
}
blockquote p {
margin:0;
background-image:url(images/openQuote11.png);
background-repeat:no-repeat;
background-position:left top;
padding:0px 80px 30px 40px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
text-shadow:1px 1px 1px #CCC;
color:#09F;
}
This is my favourite example of a contemporary blockquote example. A large opening quotation mark and a small closing quotation mark combine to create a really great blockquote tag example. The paragraph text can overlap the opening speech mark while the closing quotation mark sits stylishly underneath.
Combing the two Quotation marks makes this blockquote example stand out in a crowd.
blockquote {
margin:0;
background:url(images/closeQuote9.png);
background-repeat:no-repeat;
background-position: 220px bottom;
width:400px;
}
blockquote p {
margin:0;
background-image:url(images/lgeOpenQuote1.png);
background-repeat:no-repeat;
background-position:left top;
padding:45px 50px 45px 30px;
font-family:"Comic Sans MS", cursive;
font-size:24px;
color:#666;
text-shadow:2px 2px 2px #fff;
}
This css blockquote example has been adjusted to sit inline above and below the blockquote. This blockquote style would also look good with a background image to frame it.
The blockquote code has been adjusted on both the blockquote selector and the paragraph selector.
blockquote {
margin:0;
background:url(images/closeQuote5.png);
background-repeat:no-repeat;
background-position: 165px bottom;
width:270px;
}
blockquote p {
margin:0;
background-image:url(images/openQuote5.png);
background-repeat:no-repeat;
background-position:top 5px;
padding:50px 45px 45px 5px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
text-shadow:1px 1px 1px #000;
}
This example uses only a single opening blockquote background image. Standard speech marks have also been added with the paragraph and are styled with the same font family declaration as the paragraph.
The paragraph is nudged into position to overlap the blockquote background image.
blockquote {
margin:0;
background-repeat:no-repeat;
background-position: 200px bottom;
width:300px;
}
blockquote p {
margin:0;
background-image:url(images/lgeOpenQuote2.png);
background-repeat:no-repeat;
background-position:left top;
padding:60px 0px 45px 15px;
font-family:"Comic Sans MS", cursive;
font-size:24px;
color:#039;
text-shadow:1px 1px 1px #666;
}
A standard set of blockquote background images has been attached to this CSS Blockquote example. These have been added just in case you need a more conservative look and feel to your website design project.
blockquote {
margin:0;
background:url(images/smlCloseQuote1.gif);
background-repeat:no-repeat;
background-position: 195px 60%;
width:270px;
}
blockquote p {
margin:0;
background-image:url(images/smlOpenQuote1.gif);
background-repeat:no-repeat;
background-position:left top;
padding:0px 45px 45px 15px;
}
CSS Blockquote Styling - Recommendations
You will notice from all of the above CSS blockquote examples that the styling and positioning of the blockquotes can vary quite a bit. Styling blockquotes is not an exact science. Sometimes using percentages will fit and sometimes specifying pixels in your blockquote code will suffice.
If you wish to create many different blockquote styles for one website then you should create them in classes and be very specific with the CSS selector paths otherwise your styles might override each other. Place each class of blockquote into it’s of div tag and you should be fine. If you have any questions regarding blockquote tags or styling quotation marks then please use the comment form provided.
Related Tutorials:
Styling Pull Quotes - Dreamwever article tutorial
Typography in Web Design - Video Tutorial
Drop Caps Tutorial - Article Tutorial
Drop Cap Typography - Video Tutorial
