CSS Property quotes
quotes sets the quotation pattern used with quotes and nested quotes.
The actual quote marks are inserted via the property content.
Summary
| Item | Value |
|---|---|
| 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 |
Example
An example showing how to use quotes CSS property.
<html lang="en">
<head>
<style>
q{<!-- w ww . j a va2 s . com-->
quotes: '\201C' '\201D' '\2018' '\2019';
}
</style>
</head>
<body>
<p><q>This is a <q>quote</q>.</q></p>
</body>
</html>