How To Create Blockquote Without Using CSS?

by S.Pradeep Kumar on August 12, 2009





I hope you are familiar with block quotes. They are nothing but some sections of texts used for highlighting quotes from other sources. They are mostly indented from the blog post and they have different background color or text size and color.

Blockquotes

Blockquotes

Why Should I Use Blockquote In My Blog Articles ?

If you are quoting about some matter from another blog, then it should be different. Your readers should feel the different.

  • Quotations can be easily recognized from the main section of your posts.
  • They can enrich and complement your theme.
  • Your readers will get to know that those are special lines.

How To Design My Own Block quotes ?

Most of the wordpress themes have cool block quotes, but for some it just indents the quote and changes the font size and color.

In this tutorial we are going to create blockquote without using .CSS.

Actually this tutorial is quite simple and of course, the blockquotes are also simple but effective, because Simplicity is Essential.

1. Changing the Background color with some text formatting

Coding For Yellow :

<p style=”padding: 5px; background-color: #FFFF99; border: dotted 2px #FF9900;”> Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

Coding For Blue :

<p style=”padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;”>Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

2. Without Changing The Background Color With Text Formatting

This is a cool alternative for above mentioned block quote. This creates indent from the main blog post. This one uses no image but satisfies the look of an image.

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

Coding :

<b style=”float: left; font-weight: normal; font: 14px/22px arial; margin-top 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #666666;”>Text Here</b>

Note : This Tutorial is compatible with Blogger and WordPress blogs. If you are familiar with HTML you can use your own codings to edit and customize.



Related Articles From This Blog :



{ 28 comments… read them below or add one }

1 Suneel August 12, 2009 at 10:54 pm

Hey this style is pretty much similar to what a squidoo lens requires.

I had worked on a few lenses earlier this year and found them to be highly effective.

Great post.

Reply

2 S.Pradeep Kumar August 13, 2009 at 8:04 am

Hey nice dude.. I like Squidoo ! Maybe I can share some doubts with you ! ;)

This tutorial is triggered by Squidoo ! :D

Reply

3 Keith Dsouza August 18, 2009 at 5:40 pm

The title of the post is wrong.

The style tag is basically part of CSS itself, so technically you are still using CSS to display the content, the only difference is that you are doing it within the HTML code.

You can find more info about CSS and style tags here http://www.w3.org/TR/css-style-attr

Reply

4 S.Pradeep Kumar August 19, 2009 at 10:00 am

Follow on Twitter Follow @HellBlog on Twitter.



Keith, I really appreciate for your participation in this article. But I wrote this article in my point of view,

Create block quote without using CSS.

I meant the style sheet here, which has .css extension. This tutorial helps you create block quotes without using that style sheet ! You don’t need to touch them, you can simply copy and paste the code in the editor and publish.

And I really sorry for the title thing ! I was in a hurry ! :D

Reply

5 Keith Dsouza August 19, 2009 at 12:03 pm

Well agreed that you had this in mind, but why be repetitive, i mean using CSS styles does not require you to add it to the CSS, you can easily add it to the HTML page itself using tags, so instead of assigning the CSS directly to elements you could do this.

.bquoteyellow {padding: 5px; background-color: #FFFF99; border: dotted 2px #FF9900;}
.bquoteblue {padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;}
.bquotenocolor {float: left; font-weight: normal; font: 14px/22px arial; margin-top 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #666666;}

and then use it as Text here

This way you do not have to keep remembering those styles, you just add the classname to the paras

Reply

6 S.Pradeep Kumar August 19, 2009 at 12:16 pm

Follow on Twitter Follow @HellBlog on Twitter.



Thanks for detailed explanation buddy ! ;)

I thought of making this tutorial as simple as possible.. thats why…

Once again thanks for your participation ! :)

Reply

7 Surender Sharma August 13, 2009 at 3:25 am

Thank you Pradeep.

Reply

8 S.Pradeep Kumar August 13, 2009 at 8:01 am

Hey thanks for that dude ! ;)

Reply

9 Fatin Pauzi August 13, 2009 at 6:36 am

Wow, that’s a great alternative. Thanks for sharing. :)

Reply

10 S.Pradeep Kumar August 13, 2009 at 8:01 am

You are welcome Fatin ! ;)

Glad it is helpful to you ! …

Reply

11 ViewCheapest August 13, 2009 at 7:29 pm

It is really helpful. I can try different colors and styles.

Reply

12 S.Pradeep Kumar August 13, 2009 at 10:32 pm

Yeah.. simple and sensitive tutorial ! :D

Glad it is helpful to you…

Reply

13 sham August 15, 2009 at 6:50 am

Nice info dude…I too use it..

Reply

14 S.Pradeep Kumar August 15, 2009 at 6:59 am

Thanks Sham ! ;)

Glad you liked it ! …

Reply

15 Ricky August 16, 2009 at 2:40 pm

Nice sharing dude. I use it using css, but it will come in handy

Reply

16 S.Pradeep Kumar August 17, 2009 at 8:02 am

Glad this is useful for Ricky ! Cheers ! ;)

Reply

17 SriGanesh August 18, 2009 at 3:03 pm

good article. so can we use this for Share this and put our soucial icons in it. within the quoates. :lol:

Reply

18 S.Pradeep Kumar August 18, 2009 at 8:22 pm

Follow on Twitter Follow @HellBlog on Twitter.



Thanks SriGanesh, Glad you liked it ! ;)

Reply

19 Garry September 18, 2009 at 9:07 am

Great ways to do such a “required” thing.I found this really useful.Thanks indeed.Probably I needed this stuff really,thanks !

Reply

20 SEO Tips for Blogger October 17, 2009 at 7:46 pm

this is a very well writen article but i don`t understand why not use css

Reply

21 S.Pradeep Kumar October 18, 2009 at 6:20 am

Follow on Twitter Follow @HellBlog on Twitter.



Using CSS is the best and good practice.. but this article focussed for handy purposes ! :)

Reply

22 Sunny Bhasin November 15, 2009 at 10:19 am

Thanks Pradeep :)
I had a question in the second method of creating block quote :)
Text Here
As the above code will generate the normal block quote with it’s default image i.e. a Straight vertical bar then the text ,What if i want some other image instead of the black vertical bar???

Reply

23 S.Pradeep Kumar November 15, 2009 at 1:05 pm

Follow on Twitter Follow @HellBlog on Twitter.



Sunny, you need to use img src tag and attribute for that.. :)

Reply

24 Senthil Ramesh December 1, 2009 at 10:31 pm

I like the second point. The first point is like not-a-so-cool technique. But the second one resembles as such the Block Quote comes with many themes.

Reply

25 S.Pradeep Kumar December 2, 2009 at 9:50 am

Follow on Twitter Follow @HellBlog on Twitter.



Yup.. exactly… but both comes handy! :D

Reply

26 Anup January 2, 2010 at 9:41 am

i am trying to customize blockquotes with best colors:)

Reply

27 Anup@Hack Tutors February 20, 2010 at 10:21 am

Now i know that block quotes is one of the blog’s beauty…You can see the example in my blog ;)

Reply

28 Money from blogging | SEO for blogger March 7, 2010 at 5:54 am

Follow on Twitter Follow @blogsearning on Twitter.



nice article. Do you have coding for more colors ?
Money from blogging | SEO for blogger’s last blog…Ten Tips To Making Blogging = Money

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

</