CSS Property quotes

quotes sets the quotation pattern used with quotes and nested quotes. The actual quote marks are inserted via the property content.


Initial value
Inherited Yes.
Version CSS2
JavaScript syntax object.style.quotes="none"
Applies to All elements.

CSS Syntax

quotes: quote-pair1 ... quote-pairN | none | inherit

Property Values

The property values are listed in the following table.

Value Description
none Not to add "open-quote" and "close-quote" to the "content" property
string string string string The first two values sets the first level of quotation embedding, the next two values sets the next level of quote embedding...
inherit Inherit the quotes property from the parent element

The following table shows the Quotation Mark Characters

Result Description Entity Number
" double quote "
' single quote '
single, left angle quote ‹
single, right angle quote ›
« double, left angle quote «
» double, right angle quote »
left quote (single high-6) ‘
right quote (single high-9) ’
left quote (double high-6) “
right quote (double high-9) ”
double quote (double low-9) „

Browser compatibility

quotes Yes Yes Yes Yes Yes


An example showing how to use quotes CSS property.

<html lang="en">
q{<!--  w ww . j  a va2 s  .  com-->
   quotes: '\201C' '\201D' '\2018' '\2019';

<p><q>This is a <q>quote</q>.</q></p>

Click to view the demo