The Best CSS Styling For Blockquotes
The Best CSS Styling For Blockquotes
This post is going to be taking a look at some of the best CSS code snippets to style block quotes in 2020. We wrote this article because we were trying to find good CSS styling for blockquotes, but all of the resource guides available were published years ago, or don't contain high quality CSS blockquote styling.
In this post, we're going to go over the best block code CSS styling snippets four 2020, why they've ended up on our list, and how to incorporate them into your WordPress website.
What’s A Blockquote
A blockquote is a HTML element that indicates that the enclosed tags is a quotation. Basically, it shows that these aren't your words, there somebody else is, and makes it easy to cite the source.
You can cite the source using URLs, publication information, and more. This is also speculation, but we and many others believe that the HTML block code element is helpful for SEO. That's because Google doesn't like duplicate content, and this is a hard coded indicator that the content contained within the HTML element isn't yours.
Because it has a standard structure , one could assume that Google has incorporated this into their crawl bot algorithm. If you're quoting somebody, we definitely recommend using a block quote because of the potential SEO benefits and ease of incorporation into your WordPress website.
WordPress Blockquotes
At the time of writing, the most recent version of WordPress is 5.5. With the modern versions of the WordPress CMS, the Gutenberg editor is front and center as the predominant way to create and publish content. This editor utilizes blocks, and one of those default blocks is a blockquote. Here's the general code:
<blockquote class="wp-block-quote"><p></p></blockquote>Code language: HTML, XML (xml)WordPress blockquotes differ between websites because theme styling applies to them. Styling and selectors can also change if you're using page builders such as Elementor or Oxygen Builder.
However, most of the time they have the class wp-block-quote.
How To Use The Code Snippets In This Article
This standard class makes it really easy to apply the CSS styling for blockquotes contained in this article too those on your website. Simply take the CSS code from the code repository website (most entries in this list come from codepen.IO ), paste it into the CSS editor under Appearences --> Customizer.
Most of the time, you'll need to change the CSS selector to match your ID or class for the specific blockquote. Typically, as mentioned above, you can use the . wp-block-quote class to apply the custom CSS styling to blockquotes on WordPress.
However, this may not work so we recommend checking out your HTML markup using something like Chrome Dev Tools.
Of course, if you're going to be using a lot of custom CSS on your WordPress website, we definitely recommend taking a look at something like YellowPencil or CSSHero.
With that out of the way, let's take a look at some of the best CSS code snippets to style block quotes in 2020. We're going to try to keep this article updated to the most recent versions of CSS, HTML, WordPress, and more. As new variations of CSS blockquote styling surface on the Internet, will try to post them here.
The Best CSS Blockquote Styling
Updated in August, 2020.
Subtle Quote
This blockquote makes use of CSS animation, a tiny snippet of JavaScript, and not much else. The background is a subtle gradient which cycles through variations of the base colors, red, blue, and pink. As the name suggests, it's simple and subtle, but it's a great way to display quotations and separate your website from others.
CSS Quote Box Hover Effects
This blockquote is really cool in that it is directly responsive to the positioning of your mouse. When you hover over the box, the elements move in accordance to the position of your mouse, and this is done with pure CSS. No JavaScript to incorporate into your website.
This is definitely one of our favorites simply because it's much more unique than any other blockquote element we've seen out there. At the same time, it isn't a pure HTML5 block quote element, instead, it's a styled DIV.
Quote App Concept
Of the blockquote styling entries on this list, this one is by far the most complex, but adds a very interesting functionality to your WordPress website without the need for an additional plugin. Essentially, it is a card that scrolls through 4 (you can add more if you need to) quotations.
It makes use of JavaScript, HTML, and CSS, but if you're looking for a way to add quotation cards to your WordPress website without an additional plugin, this is a great option for you.
Another card like quotation Widget made from HTML5 and pure CSS, this allows you to display a collection of quotes in a modern way. Keep in mind, this doesn't use the blockquote element, but is really cool because all of the animations and interactions are done with straight up CSS, no JavaScript.
This is a simple blockquote that includes the functionality to tweet out the underlying content. To add that functionality, you need to incorporate JavaScript into the blockquote, however, you can eliminate the JavaScript and just retain the CSS custom styling for your blockquote.
Stylish Blockquote
If you're looking for a unique, straight up CSS blockquote, this one may be for you. It uses custom CSS to style the HTML5 blockquote element, displaying a short quotation in A very unique way. Obviously, you can change the font styling around!
Awesome Blockquote Styling with CSS
If you're looking for the simplest, most the universal CSS styling for a blockquote, this one is your best bet. It is the typical bootstrap styling that we've come to expect when it comes to CSS blockquotes, and is a great way to style the element if your WordPress theme doesn't contain Any pre-existing CSS. Super responsive too!
Material Design Blockquote
This blockquote styling follows the material design principles outlined by Google , looks very clean, and can easily be incorporated into a WordPress website. We like this because it uses simple color accents, meaning that you can blend it into the existing branding of your site.
We have actually used this exact blockquote in many of our client websites due to the simplicity. Keep in mind, it doesn't contain any citations, so you would need to add that HTML element and style it accordingly. It's also coded in SASS, Though you can easily compile that CSS by going to the code pen, clicking on the down arrow in the CSS header, and clicking view compiled CSS.
Quote Glyph Blockquote
This is another CSS block code that is very simple and makes use of the quotation glyph at the top of the element. This is done completely with CSS, using the :before state. Simple, lightweight, and something that won't slow down the loading time of your website in any way.
Blockquote Styles
If you're looking for a collection of blockquote CSS styles, this code pen contains 5 of them. However, will be the first to admit that these look a bit outdated, but give you a good starting point if you're looking for basic styles.
Fancy Blockquote Style
This is a fancy blockquote style made completely from CSS and HTML. It pops off the page, and utilizes quotation glyphs . Everything is done in pure CSS, making it a lightweight way to display quotations on your WordPress website.
Conclusion
We hope that this article gave you some good information on CSS blockquote styling, and how to incorporate it into a WordPress website. These are the best styling snippets that we found on Codepen, But if you have any others that you would like to share, post them in the comments below.
Bookmark This Post
James LePage
