quotes - HTML CSS CSS Property

HTML CSS examples for CSS Property:quotes

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. quotes

Description

The quotes CSS property adds the quotation marks for the embedded quotations.

The following table summarizes the quotes Property.

Item Value
Default value: none
Applies to:All elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


quotes:      [string string]one or more pairs | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
noneDefault value. No quotation marks.
[string string] One or more pairs of string values for the open-quote and close-quote. The first pair represents the outer level quotation; the second pair is for the first nested level, next pair for third level and so on.
initial Sets this property to its default value.
inherit take the value of its parent element quotes property.

The example below shows the quotes property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS quotes property</title>
  <style type="text/css">
        q {<!--   w  w w .  j  a  v  a 2s . c o  m-->
            quotes: '[' ']' '"' '"';
        }
        q:before {
            content: open-quote;
        }
        q:after {
            content: close-quote;
        }
    </style>
 </head>
 <body>
  <p><q>Here is an example of <q>embedded</q> quotations.</q></p>
 </body>
</html>

Related Tutorials