A basic blockquote is a bit boring, but there are a few style tricks that you can use to spice them up. In this article you learn how to set a border, how to use graphic quote images and a few other style tricks.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Add Style to Your Blockquotes

You have probably seen webpages that display a quote from the article, but taken out of the flow of the article text. This is a page design technique borrowed from printed magazines, and if done properly it can make your article look more professional. One important thing a blockquote does is break up the monotony of paragraphs of text on a webpage, and that's important for viewer eye relief.

Note that the blockquote is an html "block" level element, which means it contains an embedded carriage return immediately before the opening <blockquote> tag and immediately after the closing </blockquote> tag. The blockquote is unique because unlike other block level elements, it places some margin before and after the blockquote, in other words, the blockquote will be displayed narrower than paragraphs in the same column.

A basic blockquote is a bit boring

A basic blockquote is a bit boring, but there are a few style tricks that you can use to spice them up. The method of applying style that I will use for these examples is called "inline style" because the style rules are defined in a style attribute within the blockquote's opening tag. This is a very easy way to apply style, but not the most efficient.

If you have multiple blockquote's to which you want to apply the same style, you could define a style class within a style code block in the <head> section of your webpage, or in a separate file linked to each webpage.

A basic blockquote is a bit boring, but there are a few style tricks that we can use to spice them up.

<blockquote style="border:double blue 3px; padding:4px;">

In the blockquote shown above, I used style to display a border around the blockquote. I set the border property to a double border with a blue color and 3 pixels wide. There are many different styles of borders you can set, including solid, groove, and ridge.

A basic blockquote is a bit boring, but there are a few style tricks that we can use to spice them up.

<blockquote style="border:solid black 1px; border-bottom-width:4px; padding:4px;">

You can set a different style for each border. In the blockquote shown above, I set border width to 1 pixel, then I overwrote the bottom border width to 4 pixels. If you add a border, you'll also need to specify some padding between the border and the text.

The html blockquote element is easy to use and can be used break up the monotony of paragraphs of text and give your webpage a more professional look.

<blockquote style="font-family:Courier; font-size:14px; color:green;">

In the blockquote shown above, I used style to set the font to Courier with a font size of 14 pixels and a green color. Of course you could set the font AND add a border.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268