Worldtechies

Particularly for a service-based businesses quotes are a great way of showing that you are a trusted and well regarded business. XHTML allows you to mark up a quotes with two tags - the blockquote or quote. But the default styling for these elements is not very inspiring. Thankfully with CSS you can do pretty much anything you want with quotes. This article will explain how to get to the following:

Using the right semantics

XHTML offers two elements for quotes in the blockquote and quote. Quote is used for inline quotes:

“I like beer” said George.

Blockquote is used for larger quotes:

“Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event.”

There is also the cite element which allows us to assign a citation to the quote.

Markup the example

Let’s start with some solid markup. Then if we change our mind we can change the styling.

<blockquote>
<p>That was one of the best Pizza‘s I have ever eaten in my life. The cheese was so good it made me faint. </p>
</blockquote>
<cite>Elvis A. Presley</cite>

In order to get the up and down quotation we need to add in an additional div. It is not a perfect solution as semantically it means nothing but we need to use it.

Sprinkle in some CSS

Then we add the some CSS:

blockquote p
{
padding: 0px 15px 0px 0px;
font-size: 1.2em;
float: left;
background: url(../images/quote_down.png) bottom right no-repeat;
}

cite
{
font-size: 1.2em;
float: right;
}

This applies the quotation marks to the top left and bottom right of the quote. The citation is floated right. And that’s it! I combine this with a PHP script that produces random quotes.

Source: http://www.shapeshed.com/journal/quotations_in_css/