CSS Blockquotes Styles for blog themes

Posted on July 26, 2008

Filed Under Web Design |

Blockquotes are usually used in blogs to indicate any content being quoted from other source. Using quotes is an interesting thing to include in your blog post or article as it supports the idea or the topic that you are writing about, but, how to customize your blockquote style?

Many people are wondering how to change the blockquote style for their blogs, sometimes they are satisfied by their blog theme except for the blockquote style, a thing that might drive some people to skip using the whole theme if they don’t know how to change it in their style sheet file.

This post will show you how to work with CSS to change the blockquote style of your blog theme in a very simple way.

Step 1: Create a blockquote style in your style sheet file

Copy and paste the following style in your style sheet, you can place it anywhere, the position and order of your styles won’t make a difference.


#blockquote_style1 {
width:450px;
font: 12px normal sans-serif;
text-indent: 23px;
padding: 15px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
}

You can change the ID of the blockquote style to any name by editing the name after the symbol # which indicates the ID of your style, you can set the width value as well to match with the size of your content area, by reading the lines of the previous style and trying other values you will get used to the whole idea of working with CSS styles.

Step 2: Call the blockquote style in your html page

Now, you are ready to include any quotes in your blog posts or articles by just creating a block division with the ID of your style as follows:

<div id=blockquote_style1>

Then insert your quote, don’t forget to close your block division after finishing.

</div>

Here is how your blockquote will look like.

Blockquotes are used every often in blogs to indicate any content being quoted from other source. Using quotes is an interesting thing to include in your blog post or article as it supports the idea or the topic that you are writing about.


Other blockquote styles

I like this blockquote style, it’s very simple. but you can change the properties values to come up with a completely different one.


#blockquote_style2 {
width:450px;
font:12px normal sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Blockquotes are used every often in blogs to indicate any content being quoted from other source. Using quotes is an interesting thing to include in your blog post or article as it supports the idea or the topic that you are writing about.



You can also add an image to your blockquote using the background-image property and setting the value to the path of your image file, it makes it more attractive, different from other normal blockquotes and adds much to your blog design as well.


#blockquote_style3 {
width:450px;
font: 12px normal sans-serif;
text-indent: 23px;
padding-left: 70px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
background-color: #dadada;
background-image: url(images/quote.gif);
background-repeat: no-repeat;
background-position: top left;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
}

Blockquotes are used every often in blogs to indicate any content being quoted from other source. Using quotes is an interesting thing to include in your blog post or article as it supports the idea or the topic that you are writing about.


Working with CSS is interesting, keep trying different values to your style using your imagination, feel free to contact me if you came up with an interesting blockquote style and want to include it in this post.

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

8 Comments so far
  1. blogbookmark.com, on July 26, 2008 at 9:49 pm  

    CSS Blockquotes Styles for blog themes…

    … Using quotes is an interesting thing to include in your blog post or article as it supports the idea or the topic that you are writing about, but, how to customize your blockquotes …

  2. Barbara Swafford, on July 27, 2008 at 8:04 am  

    Hi AxeCity,

    You make this sound so easy. I’ve messed with CSS a little, but haven’t don’t anything this extensive. Now I know where to find the information when I need it.

    Thank you for sharing!

  3. admin, on July 27, 2008 at 10:47 am  

    Hi Barbara,

    Glad that you found it easy, and hope you can come up with great results, good luck!

  4. ed, on August 18, 2008 at 4:07 pm  

    interesting idea. I tried to define more than one blockquote, but oddly only the one with the default name ‘blockquote’ seems to work. I can alter that one and all the changes will reflect, but I cannot add others.

    I was wondering why the quoye styles need to be called with ‘div id=blockquote_style1′, rather than with ‘blockquote_style1′ because the original HTML code is ‘blockquote’, no DIV, no ID.

    (trying to avoid the greater than and smaller than signs here as I am afraid they’ll wreak havoc on thi spost)

  5. admin, on August 22, 2008 at 6:18 pm  

    Hi ed,

    The greater and smaller than sign is a must to indicate to your browser that this is a tag that should be interpreted instead of just displaying it in your browser.

    I think the possible reason that your created blockquotes style don’t work is that you didn’t call their ID in your html file, for example, if you are using

    then you created a new blockquote with a different ID, say, new-blockquote, so your html file should call this new blockquote if you want to use it, so it will be like
    instead of calling the old ones.

    Hope I made it clear for you, feel free to contact me again if you need any further help.

  6. ed, on August 22, 2008 at 6:34 pm  

    Thanks. Yes I know about the gt and lt sign (I am quite affluent in asp) but as I did not immediately know how to put them in this window, i described it a bit cryptic. I had followed the instruction in yr example to the letter -so with the ‘div id=’ without prevail. When I use the basics of yr code in a style element in an individual post, it did work. But that sort of beats the purpose of using style sheets. I am just gonna try it again. Sometimes one just overlooks a small typo. Thanks for your help

  7. Pitter, on September 20, 2008 at 9:43 am  

    more comment post in this website.Really its very nice website.

  8. admin, on September 20, 2008 at 1:04 pm  

    Hi Pitter,

    Thanks for your comment, you are welcome!

Web Hosting By ICDSoft.com