CSS Fancy Quotes

There are all sorts of HTML elements that concern quotes and quoting things. I’ll let you sort out the appropriate one here. When it come to styling them you have several choices as well. You can put quotes around the quoted string or you can style the blockquote element. The main difference is whether you want the quote symbols to be inline or block.

Block-style quotes with quote author

A common method of displaying quotes is to style the <blockquote> element. Here the quotes are not used as punctuation but are sometimes used for styling purposes. The closing quotation mark is often omitted.

See the Pen RWEPwW by Kirsten Cassidy (@mantismamita) on CodePen.

Inline quotes within a text body

This is for typography aficionados or anyone who wants to use curly quotes rather than straight ones:

See the Pen WQYaXJ by Kirsten Cassidy (@mantismamita) on CodePen.

Inline quotes within a block-quote

This method is often used to style testimonials. For this inline variety, which means you are putting a quote before and after quote itself, you will want something like this:

See the Pen dYQgVM by Kirsten Cassidy (@mantismamita) on CodePen.