CSS quotes property allows browser to render quotation marks for the content.
Quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.
This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.
Possible Values
- none − The open-quote and close-quote values of the content property produce no quotation marks.
- string,string,+ − 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 and next pair for third level and so on.
- initial − Depends on user agent
- auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).
Applies to
All elements.
Syntax
Keyword Value
quotes: none;
quotes: auto;
<string> Value
quotes: "«" "»";
quotes: "«" "»" "‹" "›";
Following table describes the various quotation mark characters:
| Quotes | Description | Entity Number |
|---|---|---|
| “ | double quotes | \0022 |
| ‘ | single quote | \0027 |
| < | single, left angle quote | \2039 |
| > | single, right angle quote | \203A |
| << | double, left angle quote | \00AB |
| >> | double, right angle quote | \00BB |
| >> | double, right angle quote | \00BB |
| ‘ | left quote (single high-6) | \2018 |
| ’ | right quote (single high-9) | \2019 |
| “ | left quote (double high-6) | \201C |
| ” | right quote (double high-9) | \201D |
| „ | double quote (double low-9) | \201E |
CSS quotes – none Value
The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:
<html><head><style>
p {
quotes: none;
}
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style></head><body><p>Tutorialspoint CSS Quotes set to <i>none</i></p></body></html>CSS quotes – <string> Value
Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.
The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on
<html><head><style>
#quote1 {
quotes: '‘' '’';
}
#quote2 {
quotes: '"' '"';
}
#quote3 {
quotes: '<' '>';
}
#quote4 {
quotes: '<<' '>>';
}
#quote5 {
quotes: "<<" ">>" "<" ">";
}
#quote6 {
quotes: '\2018' '\2019';
}
#quote7 {
quotes: '\'' 00AB' ' \00BB';
}
#quote8 {
quotes: '\2039' '\203A';
}
#quote9 {
quotes: '\00AB' '\00BB';
}
#quote10 {
quotes: '\201D' '\201E';
}
</style></head><body><h3>Using quotes symbol:</h3><p><q id="quote1">Tutorialspoint CSS Quotes.</q></p><p><q id="quote2">Tutorialspoint CSS Quotes</q>.</q></p><p><q id="quote1">Tutorialspoint CSS <q id="quote2">Quotes</q>.</q></p><p>Tutorialspoint CSS <q id="quote3">Quotes</q>.</p><p><q id="quote4">Tutorialspoint CSS Quotes</q>.</q></p><p><q id="quote5">Tutorialspoint CSS<q id="quote5">Quotes</q>.</q></p><h3>Using entity number:</h3><p><q id="quote6">Tutorialspoint CSS Quotes.</q></p><p><q id="quote6">Tutorialspoint CSS<q id="quote6">Quotes</q>.</q></p><p><q id="quote7">Tutorialspoint CSS Quotes.</q></p><p>Tutorialspoint CSS <q id="quote8">Quotes</q>.</p><p><q id="quote9">Tutorialspoint CSS <q id="quote9">Quotes</q>.</q></p><p><q id="quot10">Tutorialspoint CSS Quotes.</q></p></body></html>CSS quotes – initial Value
Followig example demonstrates use of the quotes: initial; property value. This values sets default values to quotes.
<html><head><style>
q {
quotes: initial;
}
</style></head><body><p><q>Tutorialspoint CSS Quotes.</q></p></body></html>CSS quotes – auto Value
Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language – as demonstrated in the following example:
<html><head><style>
q {
quotes: auto;
}
</style></head><body><div lang="fr"><q>Tutorialpoint est un site de cours d'anglais.</q></div><hr /><div lang="ru"><q>Tutorialpoint — сайт курсов английского языка.</q></div><hr /><div lang="de"><q>Tutorialpoint is een Engelse cursuswebsite</q></div><hr /><div lang="en"><q>Tutorialpoint is an english course website.</q></div></body></html>CSS quotes – Using :lang pseudo-class
You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.
- The :lang(en) rule defines styles for elements with the English language attribute.
- The :lang(fr) rule defines styles for elements with the French language attribute.
Let us see an example −
<html><head><style>
:lang(en) {
quotes: "#" "#" "<<" ">>";
}
:lang(fr) {
quotes: '\2039' '\203A';
}
</style></head><body><p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p><p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p></body></html>
Leave a Reply