A technique traditional to print is the pull quote, a snippet of the content that stands out from its surroundings to grab a reader’s attention as they scan pages.

Step 1: The HTML

For the pull quote basics, we can start with some HTML like the following:

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<blockquote class="pquote">
	<p>It is not an exaggeration to say that peas can be described as nothing less than
 perfect spheres of joy.</p>
</blockquote>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- ...and so on... -->

The pull quote obviously being a quote makes the blockquote element the perfect choice. Read more…

• CSS QUOTES

This property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.
Values of the ‘content’ property are used to specify where the open/close quotation marks should or should not occur - the “open-quote”, “close-quote”, “no-open-quote”, and “no-close-quote” values. “Open-quote” refers to the left (first) of a given pair of specified quotes, while “close-quote” refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the “no-close-quote” and “no-open-quote” value. In the event that the quote character nesting depth is not covered in the ‘quotes’ property specification, the last valid quotation pair set should be used.

• 150 CSS Examples
• How to design css sitemap Tree
• How CSS3 works
• Benefits of CSS
• CSS Universal (*) Selector
• Imports an external style sheet
• CSS3 Multi Column Feature
• Top 15 CSS articles
• CSS Tips
• What is Pull Quotes?