Javatpoint Logo
Javatpoint Logo

CSS quotes

The quotes property in CSS specifies the type of quotation mark for the quotation used in the sentence. It defines which quotation mark to be used when the quotation is inserted by using the open-quote and close-quote values of the content property.

Syntax

Values

none: It is the default value that specifies that the open-quote and close-quote values of the content property do not generate any quotation marks.

string: This value specifies the type of quotation mark to be used in sentence. The first pair represents the outer-level quotation; the second pair indicates the first nested level, the third pair indicates the third level, and so on.

initial: It sets the property to its default value.

There are some of the quotation mark characters tabulated as follows.

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 example, we are using the none value of the quotation property and the open-quote and close-quote values of the content property. The none value prevents the values of the content property to generate the quotation marks.

Test it Now

Output

CSS quotes

Example - Using string value

Test it Now

Output

CSS quotes

We can also use the :lang pseudo-class for changing the quotation marks. It can be applied on all elements in the document, but not all elements use the quotes property, so it will be applied to most elements. Let's see an example for the same.

Example - Using :lang pseudo-class

Test it Now

Output

CSS quotes




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA