How to Highlight a Selection of Text in a Post

Another question I’ve been asked several times is how I make the boxes of text in my posts like this:

This block of text is set apart from the rest of my normal text. It’s a nice way of highlighting or emphasizing a selection of text within your post.

We talked about the importance of making your posts scannable. (That is, you want to write in such a way that makes is easy for a reader to read.) One way to do that is with highlighted blocks of text.

You do this with blockquotes. It’s simple.

How to Use Blockquotes to Format Text

  1. Write your text.
  2. Highlight the part you want to set apart.
  3. Click the blockquote icon.
  4. Done.

How to highlight text in posts.

The style of your blockquote is determined by the CSS in your stylesheet. If you want to change the way your blockquote looks, you’ll have to change the CSS. The way you do this varies, depending on the theme you’re using. (By the way, this is where the CSS Cheat Sheet will come in handy.)

How to Style Your Blockquotes

I HIGHLY recommend backing up or making a copy of your existing theme before making any changes! Back up your entire theme via FTP (here’s how to use FTP) by finding your theme folder (public_html–>wp-content–>themes–>name of your theme). At the very least, you should copy any portion of CSS you are about to change and save it somewhere so you can reinstall it if your edits don’t work as you had hoped.

It should be noted that you do not have to do the following steps (i.e. the styling) every time you use a blockquote in a post. Simply style your blockquotes once (at any time) and all blockquotes throughout your blog (past, present & future) will have the same properties and look the same.

How you style your blockquotes (or anything in your stylesheet) depends on how your theme is set up.

Many popular themes like Thesis and Headway make styling easy by simply changing your blockquote styles in your theme options. The same goes for our theme of choice, Atahualpa.

How to style your blockquotes in Atahualpa

  1. Watch the video in How to Customize Your WordPress Theme.
  2. When you get to approximately minute 1:53 in the video, you’ll see where to find your Atahualpa Theme Options under Appearance (in your Dashboard).
  3. Look for “Style BLOCKQUOTES” under “Various Content Items” and edit the CSS as you like. (Go to the bottom of this post for a brief description of how you would edit your CSS.)

How to style blockquotes in Atahualpa.

How to style your blockquote directly in your stylesheet

If you’re using a theme that doesn’t let you style your blockquotes in your theme options, you might have to edit it manually. It’s not hard.

  1. Find your stylesheet by going to Dashboard–>Appearance–>Editor.
  2. Make sure the file in the box is “Stylesheet (style.css)”. If it’s not, pull it up by clicking “stylesheet” in the right column.
  3. Find “blockquote” and then edit the CSS between the { }. It’ll look something like this:

blockquote {
margin: 0 24px 20px  24px;
padding: 16px 24px 0 24px;
border: 1px dotted #2f7684;
background: #d5ded9;
}

A Quick CSS Definition of Terms

In the example above, here’s a quick rundown of the properties. Again, check out the CSS Cheat Sheet!

When editing your CSS, I suggest you make a copy of the existing CSS first and paste it somewhere, in case you need to change it back.

Then just make some changes, save and then refresh your website (I like to have two tabs open for this so I can switch back and forth quickly). If you like it, great. If you don’t, no problem, just go back and paste the original CSS and save again.

CSS description of terms

  • “Margin” is the space from the sides of the content column and the space from the paragraphs above and below it (indicated by orange arrows). There are four values 0, 24px, 20px, 24px and determine the top (0), right (24px), bottom (20px) and left (24px) margins. In other words, the values are always listed clockwise starting from the top. The reason the top margin is 0 but there is still a space there is because it has been defined elsewhere in my stylesheet. Sounds confusing, but did you read the tutorial? :)
  • “Padding” is the space between the border of the blockquote and the text inside (as indicated by green arrows). Again, the values go clockwise.
  • “Border” is…um…the border. ;) “1px” is the thickness of the line, “dotted” is the style of the line (solid, dashed, dotted in this case), “#2f7684″ is the color of the line indicated in hexadecimal value. (Want a different color? There are lots of tools for picking color online. Here’s one that came up after a quick search.)
  • “Background” is the background color. Again, use the appropriate hexadecimal color code.

The possibilities are endless when it comes to styling. Yay for CSS!! Totally works for me.

Do you get The Useletter?

It’s a hand-curated roundup of tips I don’t share elsewhere. And peeks behind the scenes. Not sure? Learn more (& see what others think)...

Comments

  1. says

    Hi,
    I am finding a wordpress plugin which helps me to convert a keyword to a image. For example: i have keyword “Rapidshare” in many posts, i want “Rapidshare” keyword will display as Rapidshare logo image. Please help me to do…

    Thanks so much !

  2. Pagula Majorda says

    Hi
    Very informative article.
    I have a queer question. In Thesis, I needed multiple blockquotes. I duplicated the blockquote in main .css file and used names like (bqt, blogquote, bquot etc) then in custom.css I used them as:
    .custom .format_text blogquote {
    But they don’t work. Any idea why it is happening? Thanks

  3. says

    Thank you, thank you, thank you!! Once again you have answered the questions that I have searched and searched for everywhere else. You alway answer all of my newbie questions in such an easy way to understand and you are very thorough! Oh and did I say Thank you!!

  4. says

    Now I see what you were saying by telling me to replace the { }!!! I wonder why it does not show up in the comments when you type that particular symbol for code that we both tried to use!

    I do think you are on to something…. if the code gets tweaked somehow I bet you could make it work! Please let me know if you come up with something. Thanks!

  5. says

    I really appreciate you helping me. Here is what I did:

    -I copied and pasted the code that you shared directly into my HTML editor. When I switched over from that to VISUAL, it showed the exact same code. When I previewed it, it still showed the code.

    -So I took out the { } in the code and replaced them with and that kept it in the HTML editor, with only the text appearing in the VISUAL editor as it should. But still no highlighting of the text! ;0(

  6. says

    Hi Amy!
    Love your helpful and informative site! I have my blockquote set up to put a nice box around my text. I use this box for various things in my posts… but I want to have a different way to highlight text as well. Is there a plugin that gives me options to do that? I have a terrific post coming up on an interview I did of a woman who lost 200 pounds, and the blockquote will be used at the end to highlight her bio, so I want to have a different way to highlight the headings that divide the sections of the interview. If you know of any way for me to do this, I would so appreciate your advice! Thanks!

    FYI: I have looked into the plugin for Special Text boxes, but I don’t want that because I do not like the icons that show up with it. That plugin would be cool if it would just highlight my text in color without the icons!

      • says

        Yes, I use WordPress. I have changed the color of my text before, but I was hoping to put a highlighting box around it without having to change the way my blockquote is now. Hopefully I’ll find something. Thanks again!

        • Amy says

          Ah gotcha. Well you could create a div in your HTML tab. That would do it. So, let’s say you wanted to highlight this sentence:

          Sue lost 200 pounds.

          You could write something like this in your HTML tab:

          Sue lost 200 pounds.

          That would give you a gray background and 5px of padding all the way around. Of course you could use any color code like these.

          • Amy says

            Oops…it read my HTML but didn’t show it! LOL. Duh. So, here’s the code I used to create it…just replace the { and } with . I hope that makes sense!

            {div style = “background:#cccccc;padding:5px;”}Sue lost 200 pounds.{/div}

  7. says

    Hi Amy! Thanks so much for all the helpful information on your blog!

    I’d like to change the look of the backquote on my Thesis themed blog. As you mentioned, it can be done using this theme within my site options. I can’t seem to find where the settings are to do so. Any help would be much appreciated!

  8. says

    I have often wondered about that! Thanks for the handy tutorial. I’ll be bookmarking it and coming back to read it when my twins aren’t screaming. lol

  9. says

    Again you’ve answered a question that I’ve been thinking about but haven’t had time to look into. I’ll have to play around with this later.

    Thanks!

  10. says

    Alas, I really need your exact blog info, but directed to people hosted on blogger!
    Any idea how to do this on Blogger?

    • Amy says

      Hi Alicia,

      So I haven’t yet convinced you to switched to WordPress? Rats. :)

      You should be able to style your CSS manually just as I described in the post. Go to “Edit HTML” under the “Design” tab and look for the chunk of CSS in your template which says:

      blockquote (or might also be .post blockquote) {
      property: value;
      }

      You might also try googling “blogger blockquote” or something similar. Hope that helps!

      • says

        I know this is an old post, but I stumbled across it last night when I was avoiding creating a schedule after reading Tell Your Time LOL!!!

        I didn’t know what blockquotes meant so thank you so much for sharing this info! I am using blogger (please keep trying to convince me that it’s worth it to pay for hosting your own blog…) and found that by using your instructions I was able to change the HTML, but it didn’t appear to work when I was creating my post.

        Once I hit preview post in blogger, THEN the blockquotes showed up. I’m not sure if anyone else struggled with this so I thought I’d give people a heads up!

        Ironically it was when I was writing my review of Tell Your Time that I was using blockquotes.

        Thanks for all of your help!

        Johnlyn