html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS quotes property

Definition

The CSS quotes property specifies quotation marks for any number of embedded quotations.

Applies To

All elements.

Property Values

string string - Quotes to use for each level of embedded quote pairs.

inherit - The quotes properties are inherited from the parent element.

none - Any counters specified are not incremented.

Default Value

Default value is not specified and is dependant upon the user agent.

Inheritance

The quotes property is inherited from the parent element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS quotes property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS quotes Property</title>

<!-- Valid values for CSS quotes Property are:

     string string, inherit and none.

--> 

<style type="text/css">

/* Set quotes for English */
q:lang(en) {
  quotes: "«" "»" "‘" "’";
}

/* Set quotes for French */
q:lang(fr) {
  quotes: "»" "«" "“" "”";
}

</style>

</head>
<body>
<h1>Using the CSS quotes property</h1>
<h2>Using the embedded quotes we set up for English</h2>
<p lang="en"><q>I am a <q>rockstar</q>, yes</q></p>
<h2>Using the embedded quotes we set up for French</h2>
<p lang="fr"><q>Je suis un <q>rockstar</q>, oui</q></p>
</body>
</html>

How It Looks

The results of using the quotes property with the values above will look something like the following:

notepad
CSS position    << Prev          Next >>   CSS right

go to home page Homepage go to top of page Top