quotes

Summary

Sets the type of quotation marks for embedded quotations.

Overview table

Initial value: depends on user agent/element
Applies to: All elements
Inherited: Yes
Media: visual

Computed value
:

Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

quotes: [<string> <string>]+
quotes: none

Values

[<string> <string>]+: The “open-quote” and “close-quote” values are taken from the specified list of pairs of quotation marks. The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc.
none: The “open-quote” and “close-quote” values produce no quotation marks.

Examples

Here we demonstrate nested quotes. Notice the syntax used to declare the quotes. Any character can be used for a quote, but this example uses ' and ". If we wanted to declare quotes: "«" "»" "!" "@", that would work, too. You can also escape the characters (e.g. quotes: "\""), if that is your preference.

q { quotes: '"' '"' "'" "'" }
q:before { content: open-quote }
q:after  { content: close-quote }

View live example

The HTML for the example above.

<p>
  <q>When I die, I'm donating my <q>body</q> to science fiction.</q>
  <em> ~ Stephen Wright</em>
</p>

Notes

Pairs of strings are required if the value is not none.

Related specifications

CSS 2.1: W3C Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]