This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related pages

Attributions