Blockquotes and CSS styling

Posted on 23 September 2009 by Clive Walker in CSS Web Design

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

I have been busy with a new website that includes several customer comments about the business in question. That’s great but how should I code it? In this case, I thought it would be best to use the <blockquote> tag/element in my HTML. If you don’t use this tag, you should because it’s really quite useful both as a meaningful way of marking up your content and as a tag that you can style. I also decided to use the cite element. Normally, I include the <cite> tag within the <blockquote> and wrap it round the name of the person who made the comment/quote. A bit like this:

<blockquote>
  <p>Don't Make me Think!</p>
  <p><cite>Steve Krug</cite></p>
</blockquote>

The cite element is not the same as the cite attribute [which you might also decide to use].

With these tags in place, there are many ways of styling the blockquote content. I tend to stick with background colours and images but that’s just what I think works well for my clients. There are other possibilities for styling quotes and/or customer comments. Don’t let me stop you!

Info: The above quote is taken From Steve Krug’s web usability book of the same name.