CSS - quotes
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>
To Continue Learning Please Login
Login with Google