Simple Ways to Style Blockquotes in WordPress

Blockquotes are excellent at making a piece of information stand out. That’s why they’re typically reserved for longer quotes in your post; they put emphasis on the words while also providing a visual break from all the text. By default, WordPress, your theme, or maybe even a plugin will apply very basic CSS properties to blockquotes. For many people, that works just fine. But blockquotes are also a fun opportunity to apply some brand-specific elements to a site (think colors, shapes, textures, etc.).

To change the default CSS associated with blockquotes, you can do one of two things. The first, if you’re lucky, is to simply add code to the Custom CSS box provided by your theme. If you’re not as fortunate, however, you’ll need to edit your theme’s stylesheet, which means you really should create a child theme first.

Once you’re ready, here are some simple ways to style your blockquotes in WordPress to make them stand out.

1. Changing the Text

One of the easiest ways to make one block of text stand out from another is simply to change the appearance of the text. This could be the size, color, or even the font itself. Here’s an example that combines all of these changes.

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: serif;
font-size: 22px;
color: #38b6cd;
}

2. Adding Shapes

One of my favorite ways to style a blockquote is to add very simple and elegant shapes to “block” the quote (pun intended). Here are a couple different examples of this:

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #7f7f7f;
border-top: 2px solid #38b6cd;
border-bottom: 2px solid #38b6cd;
}

blockquote {
 max-width: 600px;
 margin: 20px;
 padding: 10px;
 text-align: center;
 font-family: sans-serif;
 font-size: 16px;
 color: #7f7f7f;
 border-left: 6px solid #38b6cd;
 border-top-left-radius: 20px;
 border-bottom-left-radius: 20px;
}

3. Creating a Background

If you want an approach that’s a little more bold, add a background color to your blockquotes.

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #ffffff;
background-color: #38b6cd;
border-radius: 20px;
}

Of course, if you still want a background color but don’t want it to look too bold, just choose a more subtle color.

blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #5e5d5d;
background-color: #f1fbff;
border-radius: 20px;
}

---

This is just the tip of the iceberg when it comes to styling your blockquotes. To make sure all your designs load and perform exactly as expected, make sure you’re working with a high-quality WordPress hosting provider!