blockquote css – HTML blockquote styling

blockquote css – Simple and Nice Blockquote Styling. 10 Unique and Creative CSS Blockquote Inspirations CSS Code.

Simple blockquote css style

blockquote
{
  font-style: italic;
  margin-left: 32px;
  font-family: Georgia, "Times New Roman", serif;
}

blockquote css – How to Style Blockquotes in WordPress Using CSS?

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;
}

Clean and simple blockquote style

HTML Code

<blockquote>
  Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.
  <span>Steve Jobs</span>
</blockquote>

CSS Code

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote{
  font-size: 1.4em;
  width:60%;
  margin:50px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

Center Align Your Blockquote

blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
}

Testimonial Slider Jquery Example

Change Font, Font Color, and Font Size

blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
}

Add a Background

blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
background: #ccc;
}

Add Brackets Around Your Blockquote:

blockquote {
max-width: 600px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}

Add Horizontal Borders Around Your Blockquote:

blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
border-top: 4px dotted #428bca;
border-bottom: 4px dotted #428bca;
}

Add a Quotation Mark

blockquote::before {
content: "\201C";
display: block;
font-size: 80px;
left: -230px;
top: -50px;
position: relative;
height: 0;
}

I hope you get an idea about blockquote css.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.