Simple Blockquote Examples
When including a quote from another source or document within a blog post, you’ll want to make sure it’s clear that the section is a quote rather than your own writing – some simple blockquote styling.
This post covers simple blockquote examples to make quotes stand out..
1. No styling
The above is intended as a starting point – this is an example of a blockquote without styling.
The most simple way to make your blockquote stand out is with spacing. Add padding to your blockquote element to indent the text, and to provide space between it and the paragraphs above and below.
Adding a shaded background will make the text stand out, and therefore also make it clear to readers that the section is being highlighted.
4. Font and Colour
Another way to differentiate the blockquote from the rest of your post is to use a different font, and also a font colour that is visibly different from the body text colour used in your blog posts.
5. Character Prefix
The clearest way to highlight to your readers that your blockquote is text quoted from another source or document is to use quotation marks. From a design / style perspective, many blogs use double opening quotation marks but it is also possible to include double closing quotation marks within the CSS of your post, either by way of a background image, or by specifying unicode text content before and/or after the blockquote.
Adding borders to your blockquote which complement the colour scheme of your blog can help style the section so that it’s more in-keeping with the overall theme – or a contrasting colour could also be used to indicate that the information is from a source other than yourself as the author.
7. Box Shadow
CSS means that you can now apply box shadows to elements other than images – and they can be another simple way to make your blockquote element stand out from the rest of your post. You can specify offset-x offset-y, blur-radius, spread-radius, and colour to differentiate.
8. Link Styling
Styling the elements within your blockquote can further enhance the impact – for example, in the above blockquote the link is style with a shaded background, some padding and a text colour that matches the blockquote borders.
Hopefully these examples have given you some ideas as to how to style blockquotes on your own blog – when you’re ready to start implementing, lectures 24 and 25 of our course, WordPress Theme Customisation for Beginners cover step-by-step instructions on how to build these changes into your CSS Stylesheet: