CSS Reference

CSS quotes property


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.


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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"  
<!-- Our HTML/CSS for the CSS quotes property follows -->
<html  xmlns="https://www.w3.org/1999/xhtml/">
<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: "»" "«" "“" "”";


<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>

How It Looks

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

CSS position    << Prev          Next >>   CSS right

go to home page Homepage go to top of page Top