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 stylingSimple Blockquote Styling - Base

The above is intended as a starting point – this is an example of a blockquote without styling.

Simple Block Quote Examples

2. Spacing

Simple Blockquote Styling - Spacing

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.

3. Background

Simple Blockquote Styling - Background

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

Simple Blockquote Styling - 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

Simple Blockquote Styling - Quotation Marks

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.

6. Borders

Simple Blockquote Styling - Borders

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

Simple Blockquote Styling - 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

Simple Blockquote Styling - 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:

Take the Full Course

Wordpress Theme Customisation for Beginners

Are you ready for some DIY Wordpress magic?

Easy tips & resources to help you design, build and grow your blog with some Wordpress DIY magic - join me for DIY Wordpress Tips straight to your inbox:

Written by diywptips