Little Web Hut

CSS 2.1 Reference: quotes Property

CSS quotes Property
Syntax
selector {quotes: opening closing opening closing;}
  • The opening closing pair occurs one or more times.
  • opening is a string defining an opening quotation mark.
  • closing is a string defining a closing quotation mark.
(OR)
selector {quotes: value;}
  • value is specified by using one of the following keywords: none or inherit.
Usage

The quotes property is used to define quotation marks for one or more nesting levels. Values are specified as a pair of strings. The first string represents the open-quote and the second string the close-quote. If multiple pairs are specified, the first pair is used for the highest nesting level, the second pair for the next nesting level, and so on. This property is used with the content property.


CSS Example: The quotes property is set using double quotes for the top nesting level and single quotes for the next nesting level.
  span {quotes: '"' '"' "'" "'";}
  span:before {content: open-quote;}
  span:after {content: close-quote;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • none - Nothing is displayed when the content property specifies open-quote or close-quote.
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.
Applies To All elements
Inherited Yes
Initial Value Browser dependent


quotes Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe quotes property is set using double quotes for the top nesting level and single quotes for the next nesting level.