Home »
CSS
The quotes Property in CSS
CSS | quotes Property: Here, we are going to learn about the quotes Property with syntax and examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 07, 2020
CSS | quotes Property
Trivia:
It is a very good practice to add quotes to the statements which you want to emphasize on your website or web page, besides using quotes will also draw the attention of the users to those sentences. Therefore, one must imply quotes on their website or web page wherever necessary.
Gist:
Now that we are aware of the significance of the use of quotes in our website, why don't we discuss how to handle those quotes because you can not go around placing quotes to wherever you feel like, as that would make the appearance of the website or web page shabby and also users will lose interest in your website or web page right away when they will open your website or web page. So various such properties can prove to be of help for handling quotes and this section is about one such property called quotes Property in CSS.
Definition:
To understand this property, let us have a look at the definition of this property to understand this much better.
The quotes property in CSS is used to specify which quotes are to be used when quotes are added via content:open-quote; or content:close-quote; values. Therefore, using quotes is a necessity and one must use quotes if possible.
Syntax:
Element{
quotes : none|string;
}
The quotes property takes up to two values none or string. To understand this property in detail, it is a must to understand these two values as well.
quotes : none
The first value is the none value and it is not that tough to understand this value at all, have a look at the explanation below for a clear understanding.
The none value of the quotes property specifies the open-quote and close-quote values of the content property to produce no quotation marks at all. This is also the default value.
Syntax:
Element{
quotes:none;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
quotes: none
}
</style>
</head>
<body>
<h1>The quotes Property</h1>
<p><q>This is IncludeHelp.</q></p>
</body>
</html>
Output
In the above example, it is visible that the quotes property's value is set to none hence no quotation marks are displayed. Besides being none as the default if you do not wish to enter this value explicitly, the result will be the same.
quotes : string
The second value of the quotes property is the string value, this value deals with the open-quote and close-quote string values, which would be much more understandable if you take a look at the explanation below.
This value of the quote property contains one or more pairs of strings values for open-quote or close-quote. The first pair represents the outer level of the quotation; the second pair represents the first nested level and so on.
Syntax:
Element{
quotes:string;
}
In the below example, we will see different levels of quotation marks and nested quotations.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#q1 {
quotes: '‹' '›';
}
#q2 {
quotes: '«' '»';
}
#q3 {
quotes: '‹' '›' '«' '»';
}
#q4 {
quotes: ''' ''';
}
#q5 {
quotes: '"' '"';
}
#q6 {
quotes: '\2039' '\203A';
}
#q7 {
quotes: '\''00AB'
'\00BB';
}
#q8 {
quotes: '\2039' '\203A' '\00AB' '\00BB';
}
#q9 {
quotes: '\2018' '\2019';
}
#q10 {
quotes: '\201D' '\201E';
}
</style>
</head>
<body>
<h1>The quotes Property</h1>
<p><q id="q1">This is IncludeHelp.</q></p>
<p><q id="q2">This is IncludeHelp.</q></p>
<p><q id="q3">This is IncludeHelp.</q></p>
<p><q id="q4">This is IncludeHelp.</q></p>
<p><q id="q5">This is IncludeHelp.</q></p>
<p><q id="q6">This is IncludeHelp.</q></p>
<p><q id="q7">This is IncludeHelp.</q></p>
<p><q id="q8">This is IncludeHelp.</q></p>
<p><q id="q9">This is IncludeHelp.</q></p>
<p><q id="q10">This is IncludeHelp.</q></p>
</body>
</html>
Output
In the above example, it can be seen that by using this value you can generate various types of open-quote and close-quote elements, as we can see different levels and types of close-quotes and open-quotes here in this example.
CSS Tutorial & Examples »