Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS quotes Property
The CSS quotes property is used to set quotation marks for the <q> element or elements that use the quotes property with content. It defines which characters to use for opening and closing quotes.
Syntax
selector {
quotes: open-quote close-quote;
}
Possible Values
| Value | Description |
|---|---|
none |
Removes quotation marks |
auto |
Uses browser default quotation marks |
string string |
Custom opening and closing quote characters |
Example 1: Custom Quote Marks
The following example sets single quotes for the <q> element −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
quotes: "'" "'";
}
</style>
</head>
<body>
<p>
<q id="demo">
This is demo text surrounded by quotes.
</q>
</p>
</body>
</html>
The text appears with single quotes: 'This is demo text surrounded by quotes.'
Example 2: Double Quote Marks
This example uses double quotes instead of single quotes −
<!DOCTYPE html>
<html>
<head>
<style>
.double-quotes {
quotes: '"' '"';
}
</style>
</head>
<body>
<p>
<q class="double-quotes">
This text uses double quotation marks.
</q>
</p>
</body>
</html>
The text appears with double quotes: "This text uses double quotation marks."
Example 3: Removing Quotes
Use none to remove quotation marks entirely −
<!DOCTYPE html>
<html>
<head>
<style>
.no-quotes {
quotes: none;
}
</style>
</head>
<body>
<p>
<q class="no-quotes">
This text has no quotation marks.
</q>
</p>
</body>
</html>
The text appears without any quotes: This text has no quotation marks.
Conclusion
The quotes property allows you to customize quotation marks for the <q> element. You can use custom characters, remove quotes entirely, or let the browser use its defaults.
Updated on: 2026-03-15T13:20:38+05:30
126 Views
Advertisements