Using classes and CSS overrides to create an alternate pull quote : Quotation « CSS Controls « HTML / CSS






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>Using classes and CSS overrides to create an alternate pull quote</title>
<style type="text/css" media="screen">

    
h1+p {
    font-weight: bold;
    color: #222222;
    }
    
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;
    }    
    
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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <blockquote class="floatRight">
      <p>This is the pull quote. It's really very exciting, so read it now! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p><cite>Fred Bloggs</cite></p>
    </blockquote>
    <h2>Curabitur sit amet risus</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <h3>Praesent rutrum</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>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
  </div>
</body>
</html>

   
  








Related examples in the same category

1.Text wraps quotations
2.Quotation style
3.Quotations
4.Quotation with quotation mark image
5.Sidebar with links, text and quotations
6.Quotation with background
7.Quotation with left bar
8.Quotation with quotation mark
9.Quotation Example
10.Using content property to add quotation marks to blockquote
11.Using div to create quotation box
12.Content and quotation
13.Quotation on the right, wrap with text
14.Paragraph wraps around quotation
15.Creating pull quotes in CSS
16.Quote with border