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 ("").
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>
quotes: none | [string string]+ |
initial | inherit;
| 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. |
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>
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 |
