Need Blog Updates?

Subscribe to TheCreatology via RSS | Email

3 best ways to style blockquote for your blog

by Aky Joe

A blockquote is a XHTML tag which is purposely used element in an article. The basic usage of blockquote in an article is when an author wants to post a thought, or a long piece of sentence from another resources or another author. Just like I did on my testimonials page, where the text posted is in voice of a different author, and hence I wrapped it between a blockquote tag. Screenshot below might just clear you a bit.

thecreatology blockquote design thumb 3 best ways to style blockquote for your blog

A blockquote usually highlights a text and break it apart from main content. For idealistic authors blockquote is tool to make an article more interesting for the reader. A double quote character (“ This is my thought! “) represents the content as a phrase, quote or a thought.

Usually every web browser has a default styling for Blockquotes, but we can always refine a default styling with something in relevance with theme, or may be out of the box design. In this article, I will share 3 best ways to style blockquote for your blog, using CSS.

Style 1: Blockquote styling with Images

With CSS, we are no just limited to color, we can always use background images so as to make blockquote distinct with content. Adding image to blockquote will make it eye-catchy and elegant. We will also have to add left padding, so that text doesn’t overlap the image. Screenshot below will make it more clear:

thecreatology blockquote image design thumb 3 best ways to style blockquote for your blog

Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):


blockquote{
background:url('blockquote.png') no-repeat;
padding: 5px 5px 5px 20px;
border:3px solid #ddd;
}

Style 2: Blockquote styling with Drop Caps

Adding Drop caps to a content, is a Latin initialis typographic approach, which means standing at the beginning. Drop cap is decorating the initial letter of a paragraph and making it more attractive. In this example, I have added drop cap to blockquote, using the pseudo class to increase the size of the first letter in the paragraph. You can also refer the screenshot below, to add drop cap in blockquote:

thecreatology blockquote dropcaps design thumb 3 best ways to style blockquote for your blog

Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):


blockquote{
background:#fff;
padding: 10px;

border-left:2px dashed #ddd;

}

blockquote p:first-letter {
float: left;
margin: 5px 3px 1px 0;
font-family: Georgia;
font-size: 40px;
font-weight: bold;
}

Style 3: Blockquote styling with Fonts & Colors

If you find above styles, like using images and drop caps, a bit complex then you can consider another way which is simple yet highly effective style for blockquote. Font property itself has so many attributes for styling, for instance font-style (italics) or font-variant (small-caps). In this example, will require the use of pseudo-classes in order to insert content before and after the blockquote. Screenshot will clear it more:

thecreatology blockquote fonts design thumb 3 best ways to style blockquote for your blog

Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):

blockquote {
color: #e33e00;
font-style: italic;
font-family:'Courier New', Courier, monospace;
padding:20px;
background:#fff;
}
blockquote p:before {
content: '"';
font-size: 30px;
}
blockquote p:after {
content: '"';
font-size: 30px;
}

I am using blockquote styling for my blog as well, and you can see the demo as below.

Blockquote Style Demo:

A body makes his own luck, be it good or bad.

If you have seen any other example or have an idea to style a blockquote, I would like to hear from you. If you have any queries or if further assistance is required in regard of the article, post comment as your feedback.

Similar Topics: , , ,

TheCreatology Support

We are ready, Just Say it!

If you have any doubt or a feedback, get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

7 Comments

{ read them below or add one }

nn April 20, 2011 at 1:46 am

I’ve used this on my blog. Thanks :)

Reply

Remon November 2, 2012 at 3:48 am

Is there an advantage or impact for seo on using this?

Reply

Aky Joe November 2, 2012 at 4:25 pm

Even a bit of styling is an impact for SEO. We design website for a better user interface and SEO is usually considered second.

Reply

Milind December 6, 2012 at 4:33 am

Hello
I needed 2-3 different blockquotes. (I use thesis)
I tried naming differently like blogquote / bqt/ blockquotes but they don’t work. I even duplicated them in main .css file and then in custom file I added:
.custom .format_text blogquote {

But none of them work.

What wrong am I doing? Thanks

Reply

lutfi February 5, 2013 at 2:13 pm

hy ! i like your stile website design. and this tips, but i’m sorry. i’m no longer considering to use this. i’m end up with nothing tips anywhere i use it. i hope you enjoy your day.

Reply

fowzan February 10, 2013 at 1:34 pm

hi there,
i am trying to style the blockquotes on my site through the custom.css
i am finding it pretty difficult as i dont know anything about it. can you please help me with this. my skype id is – dwrockyyy
thank you

Reply

Vfhky April 28, 2013 at 2:39 pm

OK, I must have to say your design for the blockquote style is so beautiful. But i couldn’t find the backgroud.png file…

Reply

Leave a Comment

Previous post:

Next post:

Contact Aky




Yes, I agree that all information above is valid.