CSS quotes Property

The quotes property sets the quotation marks to use for quotations.

It accepts any kind of quotation mark: ", ', ‘, ’, “, ”, ‹, ›, «, », etc.

This value overrides the default which is a pair of double quotes ("").

Example

#

A quote with custom chevron quotation marks.

A room without books is like a body without a soul

<style>
  .custom-quotes {
    quotes: "«" "»";
  }
</style>

<p>
  <q class="custom-quotes">
    A room without books is like 
    a body without a soul
  </q>
</p>

Syntax

quotes: none | [string string]+ | 
        initial | inherit;

Values

#

Value Description
none No quotation marks display.
[string string]+ A list of space separated string values that specify the quotation characters to use. The first pair specifies the first level, the next pair the second level, and so on.
initial Sets the value to its default value value.
inherit Inherits the value from its parent element.

More Examples

A style that creates quotation marks that are the same for all <q> and <blockquote> elements.

A room without books is like a body without a soul

<style>
  q, blockquote {
    quotes: "«" "»" "‹" "›";
  }
</style>

<p>
  <q>
    A room without books is like
    a <q>body</q> without a soul
  </q>
</p>

Browser support

This table shows when quotes support started for each browser.

Chrome
11.0 Apr 2011
Firefox
1.5 Nov 2005
IE/Edge
8.0 Mar 2009
Opera
4.0 Jun 2000
Safari
5.1 Oct 2011

You may also like

Guides