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.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Click to view allowed tags

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>