Title: Styling Blockquote Using CSS
Last modified: August 21, 2016

---

# Styling Blockquote Using CSS

 *  Resolved [_alexsmith1](https://wordpress.org/support/users/_alexsmith1/)
 * (@_alexsmith1)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/)
 * I am having a lot of difficulty styling the blockquotes in my theme. I know people
   are going to say, “Go to theme’s support,” but I already tried that.
 * I just want a simple giant quotation mark-led, indented blockquote. No borders,
   no background.
 * Here’s an [example](http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/)
   from a CSS tutorial site of what I want. The problem is, when I use this custom
   CSS, the blockquotes will not indent from the left side of posts. Also, the background
   and border styling is still prevalent.
 * How can I achieve the example given on my site?
 * Here’s an [example of a post with blockquotes on my site](http://theoriginalsociety.com/kato-dox-infinity-album/).
 * Here’s the CSS code given by that CSS tutorial site that I linked above that 
   is not giving me the desired results:
 *     ```
       blockquote {
       font-family: Georgia, serif;
       font-size: 18px;
       font-style: italic;
       width: 500px;
       margin: 0.25em 0;
       padding: 0.25em 40px;
       line-height: 1.45;
       position: relative;
       color: #383838;
       }
   
       blockquote:before {
       display: block;
       content: "\201C";
       font-size: 80px;
       position: absolute;
       left: -20px;
       top: -20px;
       color: #7a7a7a;
       }
   
       blockquote cite {
       color: #999999;
       font-size: 14px;
       display: block;
       margin-top: 5px;
       }
   
       blockquote cite:before {
       content: "\2014 \2009";
       }
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/#post-4701564)
 * How did you add the above CSS? I don’t see it anywhere.
 * You’ll need to add the **.post-entry** class selector to the beginning of your
   rules in order to get it to override the existing rules for blockquote. For example:
 *     ```
       .post-entry blockquote {
       font-family: Georgia, serif;
       font-size: 18px;
       font-style: italic;
       width: 500px;
       margin: 0.25em 0;
       padding: 0.25em 40px;
       line-height: 1.45;
       position: relative;
       color: #383838;
       }
       ```
   
 * If you use a web debugging tool like [Firebug](http://getfirebug.com/) or [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/),
   you’ll be able to see what the existing rules are.
 *  Thread Starter [_alexsmith1](https://wordpress.org/support/users/_alexsmith1/)
 * (@_alexsmith1)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/#post-4701625)
 * I removed the code from the site until I got it right, that’s why you don’t see
   it applied.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/#post-4701628)
 * Try using this CSS:
 *     ```
       .post-entry blockquote {
       border-left: none;
       background: transparent;
       font-family: Georgia, serif;
       font-size: 26px;
       font-style: italic;
       margin: 0.25em 10px;
       margin-right: 0px;
       padding: 0.25em 40px;
       position: relative;
       color: #383838;
       }
   
       .post-entry blockquote:before {
       display: block;
       content: "\201C";
       font-size: 80px;
       position: relative;
       left: -50px;
       top: 48px;
       color: #7a7a7a;
       }
   
       .single-post .post-entry blockquote p {
           font-size: inherit;
       }
       ```
   
 * The first rule is a general one for the blockquote. The first two properties 
   clears the left border and sets the background to transparent. You would adjust
   the font attributes in this rule.
 * The second rule is just for the big quote mark. You set the **font-size** property
   depending upon how big you want the quote mark, and adjust the **left** and **
   top** properties to move the quote mark sideways or up & down.
 * The last rule just sets the paragraphs within the blockquote to use the same 
   font size as was defined in the containing element.
 *  Thread Starter [_alexsmith1](https://wordpress.org/support/users/_alexsmith1/)
 * (@_alexsmith1)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/#post-4701835)
 * Closed.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Styling Blockquote Using CSS’ is closed to new replies.

## Tags

 * [blockquote](https://wordpress.org/support/topic-tag/blockquote/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 4 replies
 * 2 participants
 * Last reply from: [_alexsmith1](https://wordpress.org/support/users/_alexsmith1/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/styling-blockquote-using-css/#post-4701835)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics