How to style quotations in CSS

April 12, 2007 at 4:05 am Leave a comment

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:

Example of styling a quote using CSS

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;
}

blockquote
{
padding: 20px;
font-size: 1.8em;
background: url(../images/quote_up.png) top left 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/

Entry filed under: css. Tags: .

Creating a Fluid Design – CSS Tips for when you want to create a fluid layout Tableless layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Flickr Photos

The firsts lights

Lago di Braies

Survivor Mode

More Photos

Blog Stats

  • 705,780 hits

%d bloggers like this: