Creating pull quotes in CSS

   

<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>Creating pull quotes in CSS</title>
<style type="text/css" media="screen">
blockquote {
    background: url(quote-open.gif) 0 0 no-repeat;
    margin: 2.4em 2em;
}    
    
blockquote p {
    color: #555555;
    font-size: 1.3em;
    font-weight: bold;
    text-align: justify;
    background: url(quote-close.gif) 100% 90% no-repeat;
    padding: 0 33px;
    margin-bottom: 0;
}    
    
cite {
    background: none;
    display: block;
    text-align: right;
    font-size: 1.1em;
    font-weight: normal;
    font-style: italic;
}    
    
blockquote>p+p {
    background: none;
}    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <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. 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 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. 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. this is a test. this is a test. 
    </p>
    <blockquote>
      <p>This is the quote. This is the quote. This is the quote. 
      This is the quote. This is the quote. This is the quote. 
      This is the quote. This is the quote. This is the quote. 
      This is the quote. This is the quote. This is the quote. 
      This is the quote. This is the quote. This is the quote. 
      This is the quote. </p>
      <p><cite>First Name</cite></p>
    </blockquote>
    <h2>This is the heading 2</h2>
    <p>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. 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. 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>
    <h3>This is the level 3</h3>
    <p>this is a test. this is a test. this is a 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.	Using classes and CSS overrides to create an alternate pull quote
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

Creating pull quotes in CSS : q « Tags « HTML / CSS

Related examples in the same category