CSS quotes Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

In this demo, we used css 'quotes' property to create a custom quotes ( ¯ and * ).

This is paragraph with custom quotes

CSS quotes Property

CSS quotes property sets how quotation marks appear.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> q{ quotes: "¯" "*"; font-size: 19px; } </style> </head> <body> <h1>CSS quotes Property</h1> <p><q>This is a paragraph.</q></p> </body> </html>

Run

Syntax

Using CSS

element{ quotes: "¯" "*"; }

Using Javascript

object.style.quotes='"¯" "*"';

Animatable

No, quotes property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS quotes property is not specified.

Property Value

The following table provides a list of values for CSS quotes property.

Value	Explanation
none	Specifies that the open-quote and close-quote values of the content property produce no quotation marks.
string	Specifies that the one or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

All in One

In the following example, we will demonstrate all values of CSS quotes property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> q{ font-size: 19px; } #point{ quotes: "¯" "*"; } #point1{ quotes: "„" "“" "‚" "‘"; } #point2{ quotes: "«" "»" "‹" "›"; } </style> </head> <body> <h1>CSS quotes Property</h1> <h2>Two quotes are used</h2> <p><q id="point">This is a paragraph.</q></p> <h2>Four quotes are used</h2> <p><q id="point1">This <q>is a</q> paragraph.</q></p> <h2>Four quotes are used</h2> <p><q id="point2">This <q>is a</q> paragraph.</q></p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS quotes property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS quotes Property</h1> <p><q>This is a paragraph.</q></p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("q")[0]; function myFunction(){ x.style.quotes = '"¯" "*"'; } </script> </body> </html>

Run