using CSS and blockquote

The tutorial below will show you how to add speach marks to a quote without the use of images and just the use of pure CSS.

First we start off with the HTML for setting the blockquote in the page. (more information about the use and implementation of blockquote can be found here blockquote)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>CSS Blockquote</title>
    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head><body>
     <blockquote>
          <p>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris et dolor. Morbi imperdiet. Quisque blandit convallis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut augue. Proin rhoncus, diam vitae tincidunt fringilla, magna mi nonummy felis, sed mattis risus elit et mauris. Suspendisse lobortis.
          </p>
     </blockquote>
</body>
</html>

Now for the CSS.

The following CSS will format the blockquote eg. border, width, position and background colour

blockquote {
border : 2px solid #000;
width: 400px;
margin: 0px auto;
padding: 10px;
background-color: #EEF5FA;
}

Now its time to add the quotes into the blockquote using the CSS

/* This is the property before the quote starts*/
blockquote:before {
content: open-quote;
height:0px;}

/* This is the property for when the quote ends*/
blockquote:after {
content: close-quote;
height:50px;
margin:-50px 0px 0px 350px;}

note that you must have the content property on both the before and after otherwise this will not work.

Lets give the quotes soome styling as to not feel out of place with the rest of the content.

blockquote:before, blockquote:after {
color: #85B8E3;
display: block;
font-size: 5em;
width: 50px;
}

OK we are nearly finished. This is what we should have so far in the way of the blockquote appearance.

You will see from the above screen shot that the text/content currently overlaps the quotes, this can easily be solved by adding padding to the <p> within the CSS like so:

blockquote p {
padding-left:50px;
padding-right:50px;
}

And now it should look something like this:

A web example can be seen here Blockquote CSS Example.

Please note that this pure CSS way doesnt work in all browsers. I have tested this and it works in FireFox, Opera and Netscape. Unfortunately it doesn’t work in any of the IE browsers or Safari PC these browsers would require images but these can be again done in CSS with the use of images.

I will write another tutorial with the use of images within the coming week.

Bookmark It