Simple and Nice Blockquote Styling

The blockquote displays in standards-compliant browsers with the "big quotes before" effect, and in IE with a thick left border and a light grey background.
Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.

Using multiple blockquotes one after another seems to result in the first instance having a double quote before but every subsequent instance having only a single quote before (in Firefox). Why would this be?

quote: string string string string
Specifies which quotation marks to use. The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc

I was gonna mentioned some of the same changes as you (i.e. the first and last child), Brad, but then I noticed your comment. Good calls. I’d just add that it might be a good idea to set the :first-child to inline-block to preserve the bottom margin.

Inline blocking makes the opening quote display above and to the left of the first line. Kind of seeking an answer to this myself, since preserving inline styling on a multi-paragraph quote (without amending it to inline-block) makes the first paragraph lay right on top of the next one. Very funky positioning issues (at least in Fx32/33 Nightly).

The important bits – I have padding on both sides. Setting the blockquote element to position:relative means you can set the blockquote:before`` and blockquote:after to position:absolute, and then position the quote to using left, right, bottom and top

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.