Blockquotes Examples Level Quotes

Take a look another example found share by this page is a good approach to make blockquote for your text. the style code

 <style>.bq2 { width: 450px; overflow: hidden; border: 1px solid #dde5ed; background: #f8fafd; color: #758fa3; }.bq2 .source { display: block; width: 100%; margin-bottom: 5px; font-weight: bold; font-size: 13px; text-shadow: 0px 1px 0px #f8fafb; padding: 6px 11px; background: #eaeff5; border-top: 1px solid #f4f7fa; border-bottom: 1px solid #dde5ed; }.bq2 p { line-height: 19px; margin-bottom: 10px; font-style: italic; padding-left: 15px; } .bq1 { padding-left: 16px; border-left: 5px solid #577da4; width: 700px; } .bq1 p { font-style: italic; font-size: 14px; line-height: 18px; color: #8c8785; } p.after { margin-left: 40px; font-weight: bold; } p.after a { color: #6793d4; text-decoration: none; } p.after a:hover { text-decoration: underline; }</style>

Block-Level Quote

-GOB, "Arrested Development"
Well, I will tell you this, Michael. I don't have a son. But if I ever do, I'm either going to take him to the cabin in the woods, or I'm going to promise to take him and then not take him. But the one thing that I will never do is not tell him that I'm taking him to a cabin in the woods, and then not take him!

Every glorious revolution has its dark side, as for CSS is every web browser like IE7 does not support the same effect defined by CSS, so often designer has to squeeze their mind to figure out a trick, hack or fix, that’s when CSS Editor comes in to help.

- Linked Articles

Blockquote Float in Paragraph text, Examples

 <style> .left-pull { display: block; padding: 7px 11px; margin-left: 5px; width: 170px; float: left; margin-right: 10px; background: #555; color: #bcbcbc; font-weight: bold; line-height: 17px; font-size: 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }.left-pull p { font-style: italic; color: #d5d5d5; } .left-pull .ref { font-size: 11px; }</style>

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

"Here we have another pull-quote floated to the side. Except now we can give a source."
- Jake Rocheleau

Inspiring Code source

Blockquote Style Examples (3)

 <style>blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; }blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; }blockquote::after{ /*Reset to make sure*/ content: ""; }blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; }blockquote a:hover{ color: #666; }blockquote em{ font-style: italic; }</style> 
 <blockquote>

Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac habitasse platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla convallis magna nunc, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.

i just copied in this page source

Blockquote tag Examples (2)

here another examples blockquote tag and the result

 <style> 
 blockquote { 
 font-family: Georgia,serif; 
 font-size: 15px; 
 font-style: italic; 
 margin: 0.25em 0; 
 padding: 15px 20px 15px 50px; 
 border: dashed 1px #ccc; 
 line-height: 1.45; 
 color: #666; 
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTRvePtZPnzzhXqhkoSa6-eHf2_IPmvXy-L8w9q2yhc5ia2VSwljTKrTxNusfIKHA4BEqKA2CP6tdiTgpFMq2ui57lUgq9qrUhb66FkhUDHvQh5M-1qyenlmLGA0NwzqR45FVLQvKFVQ/s1600/bg-blockquote.gif) no-repeat 15px 18px; 
 clear: both; 
 }</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Blockquote Tag Example Style (1)

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

example :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru

read it the commenter here : https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/