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;
}
Simple and Nice Blockquote Styling
You can use CSS to style the HTML blockquote element. Here’s an example of how to style the blockquote element:
HTML:
<blockquote> <p>"This is a quote."</p> <cite>John Doe</cite> </blockquote>
CSS:
blockquote {
background-color: #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;
}
blockquote cite {
color: #777;
font-size: 0.9em;
font-style: normal;
margin-left: 5px;
}
blockquote:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
In this example, the CSS styles the blockquote element with a background color, left border, margin and padding. The quotes property sets the quote characters to use for the :before and :after pseudo-elements.
The :before pseudo-element is used to display an opening quotation mark before the quote text. It is styled with a larger font size and positioned using the line-height, margin-right, and vertical-align properties.
The p element inside the blockquote is styled to display inline, so the quote text flows naturally.
The cite element is used to display the name of the quote author. It is styled with a smaller font size and margin to the left of the quote text.
Finally, the :after pseudo-element is used to display a closing quotation mark after the quote text. It is styled similar to the :before pseudo-element, but with a margin to the left.
You can customize these styles as per your requirement to achieve the desired look and feel for your blockquote element.
Blockquote CSS Styles with Auto Quote Marks
If you want to automatically include quotation marks in your blockquote style without having to include them in the content of your HTML, you can use the quotes property in CSS to specify the type of quotation marks to use for the :before and :after pseudo-elements.
Here’s an example of how you can use CSS to style a blockquote with automatic quotation marks:
HTML:
<blockquote> <p>This is a quote.</p> <cite>John Doe</cite> </blockquote>
CSS:
blockquote {
margin: 1em 0;
padding: 0 1em;
quotes: "\201C""\201D""\2018""\2019";
font-size: 1.2em;
line-height: 1.5;
}
blockquote:before {
content: open-quote;
color: #ccc;
font-size: 3em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
blockquote:after {
content: close-quote;
color: #ccc;
font-size: 3em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
cite {
display: block;
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
}
In this example, the quotes property sets the type of quotation marks to use for the :before and :after pseudo-elements. In this case, the value is set to the Unicode code points for curly quotes and single quotes.
The :before and :after pseudo-elements are used to display the quotation marks before and after the quote text. They are styled with a large font size, and positioned using the line-height, margin-right and margin-left, and vertical-align properties.
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.