CSS - quotes

Description:

The quotes property is used to define the quotation pairs which are used at each level of nested quotation.

Possible Values:

• <string><string>: A pair of string values which are used to represent the open- and close-quotes.
• none: This prevents the values open-quote and close-quote on the property content from generating any quotation marks.

Applies to:

All the HTML elements

Example:

Here is the example:

<style tyle="text/css">
<!--
blockquote {quotes: '"' '"' "'" "'";}
q:lang(fr) {quotes: "<<" ">>" "<" ">";}
-->
</style>
     

In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used:

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>
     

The :lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.