The objective of most web designers is to separate content from markup. It is also an objective to not use images when possible, simply for the fact that you have to edit the images in external software if you want to modify the look and feel them. Remember, if you can do it in CSS then do it in CSS. Below I will show you how to create CSS quotes without the need of images. The code is also pretty pure without the use of extra nested tags or classes.
Setting Up Your CSS Quotes
First, lets use the blockquote tag, because it is the most semantic choice when dealing with quotations. Also I should note that support for the Q element is not there yet in Internet Explorer so we will avoid that tag for now. The margin used, gives the blockquote some spacing much like a paragraph tag would, while the padding left offsets the content from our left quote.
blockquote
{
margin: 2em 0px;
padding-left: 40px;
}
Styling Our CSS Curly Quotes
Now we use the :before pseudo selector to place our CSS content. I changed the color, font family and gave it a negative margin which is the reverse of the padding we gave to the blockquote element. Next we use the HTML entity '201C' which will render as a quotation mark. We have to use this to get it working in Safari and Google Chrome.
blockquote:before
{
color: #990000;
content: '201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
Putting It All Together
blockquote
{
margin: 2em 0px;
padding-left: 40px;
}
blockquote:before
{
color: #990000;
content: '201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
Click to view a demo of CSS curly quotes
