CSS quotes PropertyS2C Home « 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>
<!-- Our HTML/CSS for the CSS quotes property follows -->
<html lang="en">
<head>
<title>CSS 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:
Homepage
Top