CSS quotes
CSS is all about presentation. Discover how CSS quotes works to transform plain HTML into a premium user experience in the guide below.
The CSS quotes attribute determines the style of quotation marks to be displayed in a sentence. It dictates the specific quotation marks to be utilized when inserting quotes with the open-quote and close-quote values within the content property.
Syntax
quotes: none | string | initial;
Values
It represents the default setting indicating that the open-quote and close-quote values within the content property will not produce any quotation marks.
This parameter denotes the kind of quotation mark to be employed in a sentence. The initial pair denotes the outermost level of quotation; the subsequent pair signifies the first nested level, the third pair denotes the third level, and so forth.
It assigns the attribute to its initial value.
There are several quotation mark characters listed in the table below.
| Description | Entity number | |
|---|---|---|
| " | double quote | \0022 |
| ' | single quote | \0027 |
| „ | double quote (double low-9) | \201E |
| « | double, left angle quote | \00AB |
| » | double, right angle quote | \00BB |
| ‹ | single, left angle quote | \2039 |
| › | single, right angle quote | \203A |
| ' | left quote (single high-6) | \2018 |
| ' | right quote (single high-9) | \2019 |
| “ | left quote (double high-6) | \201C |
| ” | right quote (double high-9) | \201D |
We can understand the quotes property more clearly by using some examples.
Example - Using none value
In this instance, we are utilizing the none value within the quotation property and the open-quote and close-quote values within the content property. The none value serves to inhibit the content property from generating the quotation marks.
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
p {
quotes: none;
font-size: 20px;
}
p:before{
content: open-quote;
}
p:after{
content: close-quote;
}
</style>
</head>
<body>
<center>
<h1> Example of quotes: none; </h1>
<p> Welcome to the C# Tutorial </p>
</center>
</body>
</html>
Output
Example - Using string value
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
body{
text-align: center;
}
h1{
color: blue;
}
p{
font-size: 20px;
}
#j1 {
quotes: '‹' '›';
}
#j2 {
quotes: '‘' '’' ;
}
#j3 {
quotes: '”' '„';
}
#j4 {
quotes: '«' '»';
}
#j5 {
quotes: '“' '”';
}
#j6 {
quotes: '‹' '›' '«' '»' ;
}
#j7 {
quotes: '\2018' '\2019';
}
#j8 {
quotes: '\2039' '\203A';
}
#j9 {
quotes: '\201C' '\201E';
}
#j10 {
quotes: '\201D' '\201E';
}
#j11 {
quotes: '\0022' '\201E';
}
#j12 {
quotes: '\201C' '\201D';
}
#j13 {
quotes: initial;
}
</style>
</head>
<body>
<h1> Example of the quotes:string; </h1>
<p><q id="j1"> C# Tutorial </q></p>
<p><q id="j2"> C# Tutorial </q></p>
<p><q id="j3"> C# Tutorial </q></p>
<p><q id="j4"> C# Tutorial </q></p>
<p><q id="j5"> C# Tutorial </q></p>
<p><q id="j6"> C# Tutorial </q></p>
<p><q id="j7"> C# Tutorial </q></p>
<p><q id="j8"> C# Tutorial </q></p>
<p><q id="j9"> C# Tutorial </q></p>
<p><q id="j10"> C# Tutorial </q></p>
<p><q id="j11"> C# Tutorial </q></p>
<p><q id="j12"> C# Tutorial </q></p>
<p><q id="j13"> C# Tutorial </q></p>
</body>
</html>
Output
We can also utilize the :lang pseudo-class to modify the quotation marks. This can be implemented across all elements within the document, although not all elements make use of the quotes property, hence it will affect the majority of elements. Let's explore an illustration to demonstrate this concept.
Example - Using :lang pseudo-class
<html>
<head>
<style type = "text/css">
p{
font-size: 25px;
color: red;
}
:lang(en) { quotes: '“' '”'; }
:lang(fr) { quotes: '\201D' '\201E' ; }
</style>
</head>
<body>
<p><q lang = "en"> Welcome to the C# Tutorial. </q> <br>
<q lang = "fr"> This site is developed so that students may learn computer science related technologies easily. </q><br>
The C# Tutorial is committed to provide easy and in-depth tutorials on various technologies. </q></p>
</body>
</html>
Output
