Using classes and CSS overrides to create an alternate pull quote

   


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
<style type="text/css" media="screen">
blockquote {
    background: url(quote-open.gif) 0 0 no-repeat;
    margin: 2.4em 2em;
}    
    
blockquote p {
    background: url(quote-close.gif) 100% 90% no-repeat;
    padding: 0 33px;
    margin-bottom: 0;
}    
    
cite {
    background: none;
    display: block;
    text-align: right;
}    
    
blockquote>p+p {
    background: none;
}    
    
blockquote.floatRight {
    float: right;
    width: 150px;
    background: none;
    border-top: 5px solid #dddddd;
    border-bottom: 5px solid #dddddd;
    padding: 10px 0;
    margin: 0 0 2em 2.4em;
}
    
blockquote.floatRight p {
    text-align: center;
    background: none;
    padding: 0;
}    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p>This is the first paragraph. this is a test.  this is a test.  this is a test.  
    this is a test. this is a test. this is a test. this is a test. 
    </p>
    <p>This is the second. This is the second. This is the second. This is the second. 
    This is the second. This is the second. This is the second. 
    This is the second. This is the second. This is the second. This is the second. 
    </p>
    <blockquote class="floatRight">
      <p>This is a quote which is floating. this is a test. this is a test. this is a test. 
      </p>
      <p><cite>First Name</cite></p>
    </blockquote>
    <h2>This is the header 2</h2>
    <p>This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. This is a paragraph. 
    This is a paragraph. This is a paragraph. </p>
    <p>This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. 
    This is another paragraph. This is another paragraph. This is another paragraph. </p>
    <h3>This is the headering</h3>
    <p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
    <h3>Habitant morbid</h3>
    <p>This is a test This is another test. This is a test.</p>
  </div>
</body>
</html>

Related examples in the same category

1.	Inline quotation
2.	q:before {content:open-quote;}
3.	q:after {content:close-quote;}
4.	q {quotes: '"' '"';}
5.	quotes for quote
6.	Create quote with float: right
7.	Creating pull quotes in CSS
8.	Pull Quote with font, border top bottom
9.	Quote with thick border
10.	Center Callout
11.	Right Floating Callout
12.	'q' Example
13.	'cite' provides a URL for reference information to a borrowed quotation

Using classes and CSS overrides to create an alternate pull quote : q « Tags « HTML / CSS

Related examples in the same category