Creating pull quotes in CSS : quote : Text HTML CSS TUTORIALS


HTML CSS TUTORIALS » Text » quote »

 

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.gif0 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.gif10090% 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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Text
» quote