Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Blockquotes and CSS styling

Posted on 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.

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments are OFF for this post.

© 2022 Clive Walker