Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

Pull Quotes - Dreamweaver Typography


In this tutorial you will discover how to take a block quote html tag and change it into an interesting and engaging typographical pull quote. Your website visitors will be immediately be drawn to the pull quotes content because it stands out from the rest of the page content. Take a look at this typographical web page example. Pull quotes have larger font sizes than your regular paragraph content and are usually styled either with graphical background elements or with a simple side border like in pull quote example on the right.

A pull quote is a line of text that you may want to draw the reader’s attention to.

A pull Quote is a line of text that you may want to draw the reader’s attention to. In fact, the beginning of this paragraph is in the pull quote to your right.

Notice how the pull quote is pushing the text in this paragraph away. You could mistakenly think that the pull quote is in its own div tag or is an image. But you would be wrong. The pull quote is simply an html block quote which has CSS styles applied to it to float to the right. The paragraph adjacent to it seemingly collapses but is then pushed away using a padding left attribute. Putting any text inside of a block quote tag will also make it a block level element.


1. The Block Quotes HTML

Separate the text you would like to put into a pull quote from the paragraph it is in and wrap the text inside of a blockquote html tag:


 <p> paragraph text </p>
 
   <blockquote>

     This is the Pull Quote text in between the blockquotes

   </blockquote>
 
 </p> Paragraph text </p>

To get the best possible outcome for your pull quote and to look its best, you will need more paragraph content than in the example above.

2. Style the block quotes html tag using CSS

The font size of your block quote css should generally be larger than your page content’s font size. It is necessary to float the block quote right or left depending on where you would like your finished pull quote to appear. A width is set to the block quote to define its size and shape relative to the rest of the page content. And padding is set to the left to push away the adjacent paragraph. A line height is set to make the text in the pull quotes more distinguished. For more visual creativity, a thick 8 pixel solid border has been set.


  blockquote {
        
          font-size:20px;
          float:right;
          width:220px;
          border-left:8px solid #C60;
          padding-left:20px;
          line-height:30px;


  }

The CSS is a generic example of the styling that would go into an effective pull quote. You should tweak the css to suit your web pages feel and look. In other words, the CSS defined here in the example is not by any means set in stone. Be creative and experiment.





Related Tutorials:

Typography in Web Design - Video Tutorial

Drop Caps Tutorial - Article Tutorial

Drop Cap Typography - Video Tutorial



Share this Dreamweaver Article:

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials