How to Style Blockquotes

Did you ever wonder how people get that cool, stylized blockquote text for their book descriptions? Well I’m going to show you how! Everyone can do this, whether you’re using Blogger or WordPress! You will have to be comfortable editing your theme files, and knowing some CSS will help, but I’ll do my best to explain every step.

Examples

Step 1: Figuring Out the HTML

The first step is figuring out what HTML tags you use for your book descriptions. The best practice is to be using HTML blockquote tags that look like this:

<blockquote>Text goes here!</blockquote>

However, you could be using something else, like a div ID or class. Here are a few other possibilities:

<div id="bookBlurb">
<p>Text here.</p>
</div>
<div class="quote">
<p>Text here.</p>
</div>
To figure out what you use, visit one of your book review pages. The next steps will differ depending on what browser you’re using. I’ll cover Chrome, FireFox, Safari, and Internet Explorer.

If you already know exactly what HTML you use to wrap your book descriptions, skip ahead to step 2!

Chrome (Click to View)

Inspect Element in Chrome
Click to Enlarge
Inspect Element in Chrome

Put your mouse over the book description, right click, and select “Inspect Element.” A box will pop up at the bottom of the page that shows all the HTML elements on your website. You need to find the element that contains your entire book description. As you can see in the image below, my container is “blockquote”. Inside blockquote are various paragraph tags, which are part of the book description. But blockquote is what contains all of them.

HTML Elements in Chrome
Click to Enlarge

FireFox (Click to View)

Inspect Element in FireFox
Click to Enlarge
Inspect Element in FireFox

FireFox Markup Panel
Click to Enlarge
FireFox Markup Panel

Put your mouse over the book description, right click, and select “Inspect Element.” A new bar will pop up at the bottom. If it’s not already selected, make sure you click the “Markup Panel” button, as shown on the right image. This will open up a box showing all the HTML markup on your page. Make sure you find the element that contains your entire book description. As you can see in the image below, my container is “blockquote”. Inside blockquote are various paragraph tags, which are part of the book description. But blockquote is what contains all of them.

HTML Elements in FireFox
Click to Enlarge

Safari (Click to View)

Inspect Element in Safari
Click to Enlarge
Inspect Element in Safari

Put your mouse over the book description, right click, and select “Inspect Element.” A box will pop up at the bottom of the page that shows all the HTML elements on your website. You need to find the element that contains your entire book description. As you can see in the image below, my container is “blockquote”. Inside blockquote are various paragraph tags, which are part of the book description. But blockquote is what contains all of them.

HTML Elements in Safari
Click to Enlarge

Internet Explorer (Click to View)

FireFox Markup Panel
Click to Enlarge
Select Element in IE

First, press F12 to open up the developer tools. You should now have a new window open. In the top left of that window, select the arrow icon (as shown on the right). Now you are able to select any element on the page. Move your cursor around your webpage until a blue line appears around your book description. Then click. It should then highlight the containing element in the developer tools window. Make sure you find the element that contains your entire book description. As you can see in the image below, my container is “blockquote”. Inside blockquote are various paragraph tags, which are part of the book description. But blockquote contains all of them.

HTML Elements in Internet Explorer
Click to Enlarge

Step 2: Setting Up Your CSS Selector

Now that you’ve found your markup, it’s time to write it down! Open up a text editing program like Notepad, Notepad++, Textwrangler, or Text Edit. Anything will do! Now, use the table below to determine what you’re doing to write down. The left column shows what you found when inspecting your website, and the right column will tell you what you should write down in your text editor.

Your Markup Your CSS
<blockquote>

</blockquote>
blockquote {

}
<div id=”someTextHere”>

</div>
#someTextHere {

}
<div class=”someTextHere”>

</div>
.someTextHere {

}

The differences are subtle, but very important! Your CSS will be different if you’re using blockquote versus a div ID versus a div class. So make sure you double check!

Step 3: Beautifying With CSS

Now it’s time to make it beautiful! All our next CSS will be going inside the curly brackets from step 2. It’s also important that each line ends with a semi-colon ( ; ).

Beginner Styles

These styles are the basics—the core features you will find in a blockquote styling. The column on the left is the title of the feature, and the column on the right is how you can use it in CSS. The syntax on the right is what you should be copying, pasting, and changing in your text editor.

Feature CSS Syntax
Background Color background-color: #hexvalue;
A hex value is a six-character value that represents a colour.
You can use Colorpicker.com to find a hex value (it’s at the top).
Background Image background-image: url(‘urlhere’);
Background Repetition background-repeat: repeat;
Replace “repeat” with other options: repeat-x, repeat-y, no-repeat
* You only need to use this if you use a background image *
Background Position background-position: left top;
background-position: left center;
background-position: left bottom;
Use only one of the above.
You can change the first value to left/right/center accordingly.
* You only need to use this if you use a background image *
Typeface font-family: ‘Family Name Here’, ‘Alternative Name Here’;
Example — font-family: Helvetica, Arial, sans-serif;
If the user doesn’t have Helvetica installed, Arial will be used instead.
Font Colour color: #hexvalue;
Font Size font-size: 14px;
Change the number “14” to your desired value.
Border Width border-width: 5px;
Change the number “5” to your desired value.
Border Style border-style: dotted;
Replace “dotted” with other options: dashed, solid, double
Border Color border-color: #hexvalue;
Padding padding: 10px;
Padding is the amount of space between the content (text) and the border of the container.
Change the number “10” to your desired value.
Margin margin: 10px;
Margin is the amount of space around the container (outside the border).
Change the number “10” to your desired value.

So how do we put those to use? We put them all together and place them inside the brackets from step 2! Here is an example:

blockquote {
	background-color: #A0F090;
	font-color: #1A2E16;
	font-size: 14px;
	border-width: 2px;
	border-style: dashed;
	border-color: #1A2E16;
	padding: 10px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis varius enim. Sed ante magna, lobortis accumsan ultrices id, ultrices at ante. Quisque rutrum faucibus erat et gravida. Donec egestas lobortis est, et vehicula tortor pellentesque id. Sed semper nisl sed lorem elementum consequat. Morbi id elit nibh, ac suscipit nulla. Vestibulum ornare nisi in sapien feugiat lobortis.

Advanced Styles (Read Beginner First)

For advanced styles, we’re going to look at some extra—but unessential—CSS styles! When used correctly, these can add some pretty cool effects to your blockquote! As with beginner styles, the column on the left is the title of the feature, and the column on the right is how you can use it in CSS. The syntax on the right is what you should be copying, pasting, and changing in your text editor.

Feature CSS Syntax
Rounded Border Corners -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
You must use ALL THREE examples at once!
Change the value “5” for each one to your desired value.
The higher the number, the more rounded the corners will be.
Box Shadow box-shadow: 10px 10px 5px #hexvalue;
The first value is the position of the horizontal shadow.
The second value is the position of the vertical shadow.
The third value (optional) is the blurriness of the shadow.
The fourth value (hexvalue) is the colour.
Optionally, after the hex value, you can include the words “inset”. This will make it an inner shadow.
Text Shadow text-shadow: 2px 2px 0 #ffffff;
The first value is the position of the horizontal shadow.
The second value is the position of the vertical shadow.
The third value (optional) is the blurriness of the shadow.
The fourth value (hexvalue) is the colour.

Using these new features, let’s add on to our previous example!

blockquote {
	background-color: #A0F090;
	font-color: #1A2E16;
	font-size: 14px;
	border-width: 3px;
	border-stle: dashed;
	border-color: #1A2E16;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0 0 15px #2EDE0B, 0 0 10px #2EDE0B inset;
	text-shadow: 1px 1px #DDFAD7;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis varius enim. Sed ante magna, lobortis accumsan ultrices id, ultrices at ante. Quisque rutrum faucibus erat et gravida. Donec egestas lobortis est, et vehicula tortor pellentesque id. Sed semper nisl sed lorem elementum consequat. Morbi id elit nibh, ac suscipit nulla. Vestibulum ornare nisi in sapien feugiat lobortis.

Nunc dapibus lorem vitae eros accumsan non scelerisque mauris congue. Maecenas condimentum turpis eu nunc convallis sit amet pharetra lacus tincidunt. Nullam vel ullamcorper mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sem ligula, porta sit amet accumsan pulvinar, venenatis at quam.

Step 4: Adding it to Our Blog

Now that you have your CSS all written out, it’s time to actually apply it to your blog! I have split this part of the guide up into two sections: for WordPress users and for Blogger users. Please click the one that applies to you to view the instructions!

WordPress

Go to Appearance » Customize and find the panel called “Additional CSS”. This is where you’ll be pasting your CSS code. Don’t forget to save your changes when you’re done!

Blogger

NOTE: I am not a Blogger expert! I think my instructions are correct, but in case I’m not, feel free to correct me!

Login to your Blogger account, click on “Template”, and then select “Customise”. On the next page, click “Advanced”, and scroll down to where it says “Add CSS”. This box is where we will be pasting our custom blockquote CSS! Simply paste in the code and press “Apply to Blog” at the top right.

Additional Tips

  • Use contrasting colours. If your background is dark, make your text light. If your background is light, make your text dark. It’s important that we’re able to read your blockquote so don’t make it strenuous on the eyes!
  • Don’t use overly fancy fonts. I know those cursive and handwritten fonts look cool, but sometimes they can be really difficult or annoying to read! Use a simple font that’s legible.
  • Do before and after saves. If you’re worried about messing up your blog, simply save your files before and after the changes. For example, if you’re worried about messing up your WordPress functions.php file, then before you make any changes copy the file, paste it in a text editor, then go back to the file to make your changes. If it gets messed up, you still have the “before” version saved in your text editor and you can revert the changes!
  • You can overwrite styles that already exist If you’re trying to overwrite blockquote styles that already exist in your theme and you want to ensure that your styles take priority, then you can to add “!important” at the end of your CSS declaration. Example:
    blockquote {
    	background-color: #000000 !important;
    }

Questions?

If you have any questions, don't be afraid to ask! :)

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply to Michaniya Cancel reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

49 comments

  1. Hi Ashley,

    Let me just start by saying.. You’re an Angel! I’ve been wondering how those cute blurb boxes where made. Thank you for this tut! I have a question though, how do you get the book photo to partially overlap the blockquote? Thanks

    1. Great question, Nikki!

      Here’s an example for you, with the final look, and the code for it: Blockquote Example

      Basically there are a few key things here:

      * You need to put the image outside of the blockquote (right above it).
      * You need to float the image to the left or right (by using “float:left;” or “float:right;” in the CSS.
      * You have to set the size of the blockquote so that it’s smaller than the width of the page. You can do this by assigning it a percentage. In my example, I use 85%. So in the CSS, you put “width:85%;”.
      * You need to center the blockquote in the middle of the page. You can do this by adding this to the CSS: “margin:0 auto;”. You can change the value of the “0” to something else if you want, but the important thing is that the second value is “auto”. That will center it.

      By doing that, the image will appear on the far left or right side of the page, but the blockquote will be less than the full width of the page, and in the middle. That’s how you get the overlap effect!

      I hope that helps. πŸ™‚

        1. A lot of WordPress themes may already be styled that way too. You have to wrap the synopsis in blockquote tags. There should be a “Quote” button in the WordPress visual editor, if you use that.

          1. I’m sure there probably are, but I’ve already used my current theme for all my branding, so I was just looking for some code to do it with single posts. It works perfectly, thank you!

            J.K. Hogan recently posted: Quote-tastic 3
    1. Just in case you need it, here’s what I’m posting (including a link to the background image).

      .someTextHere {background-color: #A0F090;
      Background-image: url(β€˜link here’);
      Background-Position: left center;
      font-color: #1A2E16;
      font-size: 14px;
      border-width: 2px;
      border-stle: double;
      border-color: #1A2E16;
      padding: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      box-shadow: 0 0 15px #2EDE0B, 0 0 10px #2EDE0B inset;
      }

      Michaniya recently posted: Visual Foreplays of the Week (Wk. 1)
    2. Hi Michaniya,

      I had a look at your blog. You actually don’t have one HTML tag surrounding all your blurbs. You tend to have one div for one paragraph, and one div for the next paragraph, but one book summary might have 4 paragraphs! Also, none of the divs have classes or IDs, so you can’t target them in the CSS. Here’s a comparison:

      The first two don’t exist on your blog, I’m just using them for example purposes.

      div id=”book-summary”
      div class=”book-blurb”
      div style=”something here”

      The first two have an ID or a class, which means you can reference them in a global stylesheet. The last one doesn’t have either of those! Instead, it has some inline CSS inside of the style quotes. The problem with that, is that you can’t target it in CSS. You can only put inline styles inside of it every single time (which would be tedious).

      However, I think Blogger does have a blockquote button. If you use this button when pasting in the book summary, it will automatically wrap the whole thing in blockquote tags. Here’s where the button is: http://i.imgur.com/DoOr93C.jpg

      Then, once you start doing that (and confirm that the blurb is wrapped in blockquote tags), you can use the blockquote tag to target it in CSS. It would look like this (using your styles here):

      blockquote {background-color: #A0F090;
      background-image: url(β€˜link here’);
      background-position: left center;
      color: #1A2E16;
      font-size: 14px;
      border-width: 2px;
      border-style: double;
      border-color: #1A2E16;
      padding: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      box-shadow: 0 0 15px #2EDE0B, 0 0 10px #2EDE0B inset;
      }

      1. OMG!!!! Thank you so much, hun. I swear, I’ve been googling the heck out of this for over three weeks now. I even spent 2-3 hours last night trying to figure out how to do it and randomly stumbled upon this post today. You’re a life saver! And thank you so much for helping me with the coding problem, it works now. The background image was messing up the coding (not sure why) so I just got rid of that. Now all I have to do is find colors that I like. Again, thank you so much, Ashley!

        Michaniya recently posted: Visual Foreplays of the Week (Wk. 1)
    1. Hi Janita!

      Unfortunately if you can’t edit the CSS, then you cannot make global changes. πŸ™ You technically could still do it in-line, but it becomes super tedious! Every time you add a new post, you would have to copy the code over. It would look like this:

      <blockquote style=”css here”>text here</blockquote>

      And the CSS would go inside of style=””. So an example might be:

      <blockquote style=”color:#fff; background-color:#000; border-radius:3px;”>text here</blockquote>

      But as I said, you would have to manually put that in every single time, instead of having it be done automatically. πŸ™

  2. Hey Ashley! So I’ve made the switch (it’s been interesting) and I’m currently fixing up my posts. I’ve followed your above tutorial to add stylized blockquotes to my wordpress blog but the image isn’t floating on top of the block quote. Instead, it’s beside the block quote. Not sure what’s going wrong.

    Michaniya recently posted: Top Ten Tuesday 2
  3. OMG! I was always wondering about how people had done this. It was something I basically told myself that because I didn’t know how I guess I would just have to do something else. Thank you, thank you!

    Krys recently posted: Friday Finds
  4. Oh man, I was wondering how to do this because I thought it would be perfect from setting my recipes apart from the other parts of my posts. Right now it looks a little too jumbled together for my taste since it’s all the same formatting, and I am all about some visual separation via fonts and colors.

    And I adore those drop down sections you have in your posts!

    Leanne @ Record of Confection recently posted: Double Cherry Goat Floats
    1. Using different visual styles in your posts will help it stand out! If you just have a wall of the same text, it can be a little boring on the eyes. πŸ˜‰ Blockquotes are a great way to make certain content POP!

    1. Well child themes usually are made for more than just editing CSS. If you want to edit the PHP at all, you need a child theme. But if all you’re doing is changing CSS then you don’t necessarily need a child theme.

  5. Hi! Love the tutorial. I do have a question though. I just switched from Blogger to WordPress and my blockquote text used to wrap around the book image but it’s not doing that now. I’m not really sure if I am doing something wrong or need to add something to my css.

    1. Yep you’d give it a class. The HTML would look like this:

      <blockquote class="myclassname">text here</blockquote>

      And the CSS would look like this:

      blockquote.myclassname {
      /* CSS in here */
      }
  6. Years ago when I was editing my blockquotes I was here. Now that I’ve updated my theme and needed to remember that help again, I’ve found myself back on the same post! Nice updates around here, quite lovely by the way.

    My question… with my new theme I cannot seem to figure out how to get the quotes to nest around the image. I looked at the code for a but didn’t see one in relation with the blockquotes. However, I probably know enough about code to be dangerous I suppose.

    Can you please help? The most recent post that will attach here has an example of a mini review that includes the blockquote issue.

    It also has a video embed issue, but that’s another question…

    MJ @ Creative Madness Mama recently posted: A Plague of Unicorns by Jane Yolen
    1. The problem is that your theme has added a bunch more code that basically says, “Do not let this blockquote ‘wrap’ about anything else, like text or images.” So it will always stand on its own.

      To fix that, you have to override that behaviour with this code:

      blockquote {
          clear: none !important;
          display: block !important;
      }
      
      img {
          position: relative;
          z-index: 5;
      }
      1. Since the comments are disabled on that post now, is it OK is I ask you a question then? I know you work mostly with WordPress, but do you know where I’m supposed to put my CSS in? I know it’s line 9, but do you know where exactly it goes?

  7. Thank you so much Ashley! I’ve been after doing this EXACT thing for a few months now. It was actually your “ask a question” email that prompted me to search your site for it, and VWALA! Sorted. I’ve finally been able to do it successfully and with confidence πŸ˜€
    I want to give you a huge thank you for such an in-depth and thorough guide. As you know, I know nothing about code except… it’s jargon and a total other language! I may as well try and read Spanish :S
    So thank you Ashley πŸ™‚ You’ve made me one very happy blogger!
    Amy x

    Amy recently posted: Are The Brits Prudes?

Recent Posts

    Random Posts