Introduction to CSS quotes
CSS quotes property is defined to specify the quotation marks used for more nesting levels while they are inserted using the content property. These quotes can be added to any element and seek the benefit of pseudo-elements::before and :: after to insert the quotation marks at the beginning and end of the quote. This CSS quote specifies which type of quotation marks to use in the code. We call also use hex codes to show various quotes symbols for the generated content.
Syntax:
The general syntax of CSS quotes is given as:
Selector
{quotes : values;
}
The values are given as
Quotes : [ String string ] | none |initial |inherit;- The possible values are string and none; in addition, we have CSS- a common keyword with property values initial ( depends on the browser we use) and inherit.
- The content property uses four quote values: open-quote, close-quote, no-open-quote & no-close-quote. A pair of string values represents a string, and the latter two quotes value is none, and it prevents from generating the content with the quotes.
How do quotes work in CSS?
The quote values are specified as a pair of strings in which the first string depicts the open quote [“] and the second string depicts a close quote [“]. Also, we have quotes like curly, straight. So how does a user agent identify which one to use? So there comes a quotes property to apply the pair of quotation marks to the user agent.
When talking about multiple pair nesting levels is taken like, the first pair is used for the highest nesting level. The top nesting level uses double quotes and the single quotes for the next level to see more precisely. Finally, and most importantly, a user is expected to use specified quotes for the language, so adding quotes in the stylesheet for the element tag <q> is not necessary.
Let’s see the sample:
- Single Pair with close and open quotes:
quotes:
” “ ” ” “ “; // Straight Quotes
- Two pairs:
quotes:
““” “”” “‘” “’”;
Few Examples:
“hi, how are you, ‘Good to see you. ‘ “
We can place as many pairs of quotes with the Quote Property.
Few Hexa codes for quotes are:
| Hexa Code | Symbol | Definition |
| \2018 | ‘ | Left Single Quote |
| \2019 | ’ | Right Single Quote |
| \201C | “ | Left Double Quote |
| \201D | ” | Right Double Quote |
Sample Code:
quotes: "\201C" "\201D" "\2018" "\2019";Examples of CSS quotes
Given below are the examples of CSS quotes:
Example #1
Simple quote concept using None – A default value. Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS - quotes Property | None
</title>
<style>
#course {
quotes:none;
font-size: 18px;
color : Blue;
}
</style>
</head>
<body>
<center>
<h1 style="color:red;"> Banking Course- EDUCBA</h1>
<h2 style="color:brown;">quotes:none;</h2>
<p><q id="course">Banking Management.</q></p>
</center>
</body>
</html>Explanation:
- Here in the above code, we have created an id name’ course’ with the text content.
- To show the content property on quotes, we have assigned a quote: none; therefore, it will not produce any quotes in the result.
Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Example Showing CSS - quotes Property
</title>
<style>
p {
quotes: none;
font-size: 22px;
color: red;
}
p:before{
content: open-quote;
}
p:after{
content: close-quote;
}
</style>
</head>
<body>
<center>
<h1> EDUCBA - Advanced Certification </h1>
<p> EDUCBA - Data Science using Python programming certification course helps you to learn data science concepts deeply </p>
</center>
</body>
</html>Explanation:
- In the above code snippets, the p element is assigned none.
Output:
Example #3
Using Hex-code for quotes.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
q
{
quotes: '\201C' '\201D';
font:2.5em Georgia Bold;
}
</style>
</head>
<body>
<p><q>Welcome to my Home Page</q></p>
</body>
</html>Explanation:
- In the above code, use the quote property to set the double quotes in hex code value. For example, we have used 201C and 201D for left and right double quotes in the style part.
Output:
Example #4
Using different quotes symbols in a single program.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
body{
text-align: center;
}
h1{
color: orange;
}
p{
font-size: 18px;
}
#aq {
quotes: '?' '?';
}
#aq1 {
quotes: '«' '»';
}
#aq2{
quotes: '?' '?' '«' '»' ;
}
#aq3{
quotes: '\2018' '\2019';
}
#aq4{
quotes: '\2039' '\203A';
}
#aq5 {
quotes: '\201C' '\201E';
}
#aq6 {
quotes: '\201D' '\201E';
}
#aq6 {
quotes: '\0022' '\201E';
}
#aq7 {
quotes: '\201C' '\201D';
}
#aq8 {
quotes: initial;
}
</style>
</head>
<body>
<h1> Demo On Quotes Property Using Strings </h1>
<p><q id="aq"> facebook.com </q></p>
<p><q id="aq1"> facebook.com </q></p>
<p><q id="aq2"> facebook.com </q></p>
<p><q id="aq3"> facebook.com </q></p>
<p><q id="aq4"> facebook.com </q></p>
<p><q id="aq5"> facebook.com </q></p>
<p><q id="aq6"> facebook.com </q></p>
<p><q id="aq7"> facebook.com </q></p>
<p><q id="aq8">facebook.com </q></p>
</body>
</html>Explanation:
- The above code uses all the possibilities of quotation marks that has been created with q element with id.
Output:
Example #5
Code:
<html>
<head>
<title>CSS quotes Property for Language</title>
<style type="text/css">
q:lang(en) {
quotes: "«" "»" "‘" "’";
}
q:lang(fr) {
quotes: "»" "«" "“" "”";
}
</style>
</head>
<body>
<h1>CSS quotes property - Demo</h1>
<h2>Setting up the Quotes for English Text</h2>
<p lang="en"><q>Hi Students! <q>I'm your Instructor for this course</q>, okay</q></p>
<h2>Setting up the Quotes for French Text</h2>
<p lang="fr"><q>Salut les étudiants! <q>Je suis votre instructeur pour ce cours</q>,
d'accord</q></p>
</body>
</html>Output:
Conclusion
CSS quotes establish their uniform appearance in the text. Since each language on their own as their traditional declared quotation marks and this property helps in it. Though quotation marks play the least role in developed areas, still it is used in design development.
Recommended Articles
This is a guide to CSS quotes. Here we discuss the introduction; how do quotes work in CSS? along with examples, respectively. You may also have a look at the following articles to learn more.
