By default, most themes include CSS to style text you wrap in blockquote tags.
You can modify your themes default styling for block quotes or add custom styling for use with a different HTML tag.
The standard tag is included in the visual and text editor of WordPress.
To use block quotes you need 2 things.
- A HTML tag to wrap your text in
- And CSS to style the text wrapped in block quote tags
Default CSS
Here’s the default CSS from the Minimum pro child theme by StudioPress:
blockquote,
blockquote::before {
color: #999;
}
blockquote {
margin: 40px;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
Here’s the styling the above CSS generates:
To style your blockqoutes, you can modify your themes default styling
or
Add custom styling for block quotes like you see in the following image:
Custom CSS for Block Quotes
Here’s the CSS which generates what you see in the image above:
Was This Tutorial Helpful?