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 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.
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"; }
- The topic ‘Styling Blockquote Using CSS’ is closed to new replies.