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?
Contents
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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.