CSS quotes Property
 Complete CSS Reference
Definition
The quotes property sets the type of quotation marks for embedded quotations.
Inherited: Yes
JavaScript Syntax
CSS properties can also be dynamically changed with a JavaScript.
Scripting Syntax: object.style.quotes="none"
In our HTML DOM tutorial you can find more details about the
quotes property.
In our HTML DOM tutorial you can also find a full
Style Object Reference.
Example
Example 1
q:lang(en)
{
quotes: '"' '"' "'" "'"
}
the style above and the following HTML file:
<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
would produce this output:
"This is a 'big' quote"
Example 2
q:lang(no)
{
quotes: "«" "»" "'" "'"
}
the style above and the following HTML file:
<html lang="no">
<head>
</head>
<body>
<p><q>Vi synger <q>Mellom bakkar og berg</q> på
17.mai.</q>
</body>
</html>
would produce this output:
«Vi synger 'Mellom bakkar og berg' på 17.mai.»
|
Possible Values
| Value |
Description |
| none |
Specifies that the "open-quote" and "close-quote" values of the
"content" property will not produce any quotation marks |
| string string string string |
Defines the quotation marks to use. The first two values
specifies the first level of quotation embedding, the next two values
specifies the next level of quote embedding, etc |
Quotation Mark Characters
| Result |
Description |
Entity Number |
| " |
double quote |
" |
| ' |
single quote |
' |
| ‹ |
single, left angle quote |
‹ |
| › |
single, right angle quote |
› |
| « |
double, left angle quote |
«
|
| » |
double, right angle quote |
»
|
| ‘ |
left quote (single high-6) |
‘
|
| ’ |
right quote (single high-9) |
’
|
| “ |
left quote (double high-6) |
“
|
| ” |
right quote (double high-9) |
”
|
| „ |
double quote (double low-9) |
„
|
Try-It-Yourself Demos
Changes the
quotation marks on a page
This example demonstrates how to change the quotation marks on a page.
Complete CSS Reference
|
