CSS -Quotes

In CSS, the “quotes” property is used to specify custom quotation marks for HTML elements with the “content” property. It allows web designers to define their preferred symbols for quotations in various languages and styles.

To use the “quotes” property, you define a pair of quotation mark symbols for the opening and closing quotes using the " (double quotes) or ' (single quotes) characters. These symbols are then associated with specific languages using the lang attribute or language pseudo-classes like :lang().

In CSS, the “quotes” property allows you to specify custom quotation marks for use in generated content, such as quotes within blockquotes or inline quotes. You define pairs of quotation marks for different levels of quotations. Here are the common values and their meanings for the “quotes” property:

1. None: When you set “quotes” to “none,” it means there are no custom quotation marks defined. The browser will use its default quotation marks.

   blockquote {
     quotes: none;
   }Code language: CSS (css)

2. Auto: This is the default value. The browser automatically selects appropriate quotation marks based on the language and context.

   blockquote {
     quotes: auto;
   }Code language: CSS (css)

3. Custom Quotation Marks: You can define custom quotation marks for different levels of quotations. The values are enclosed in pairs of double or single quotation marks. Each pair represents the opening and closing quotes for a specific level. For example:

   blockquote {
     quotes: "“" "”" "‘" "’";
   }Code language: CSS (css)

• The first pair (““” and “””) represents the opening and closing quotes for the first level of quotations.
• The second pair (“‘” and “’”) represents the opening and closing quotes for the second level of quotations.

1. Language-Specific Quotation Marks: You can also specify custom quotation marks for specific languages using the lang attribute or language pseudo-classes like :lang(). This allows you to define quotation marks tailored to different languages or writing styles.

   q:lang(fr) {
     quotes: "«" "»" "‹" "›";
   }Code language: CSS (css)

In this example, custom French quotation marks are defined for the <q> element when the lang attribute is set to “fr.”

By using the “quotes” property with these values, you can control the appearance of quotation marks in your web content, providing flexibility for different languages and design preferences.

Example :

In CSS, you can use the quotes property to specify the quotation marks used for the ::before and ::after pseudo-elements when generated content is inserted into the document using the content property. Here’s an example in HTML and CSS that demonstrates the use of the quotes property:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS styles to set the quotes property */
        blockquote {
            quotes: "❮" "❯" "❮" "❯"; /* Custom quotation marks for ::before and ::after */
        }

        /* Apply styles to the generated content */
        blockquote::before {
            content: open-quote; /* Use the first quotation mark */
        }

        blockquote::after {
            content: close-quote; /* Use the second quotation mark */
        }
    </style>
</head>
<body>
    <h2>Custom Quotation Marks</h2>
    <blockquote>
        This is a blockquote with custom quotation marks.
    </blockquote>
</body>
</html>Code language: HTML, XML (xml)

Output :

In this example:

• We have a <blockquote> element containing a block of text.
• In the CSS, we use the quotes property to define custom quotation marks. We specify two pairs of quotation marks: "❮" "❯" and "❮" "❯". The first pair represents the opening and closing quotation marks for the ::before pseudo-element, and the second pair represents the opening and closing quotation marks for the ::after pseudo-element.
• We use the ::before and ::after pseudo-elements to insert the custom quotation marks using the content property. We specify open-quote for the ::before and close-quote for the ::after to use the defined custom quotation marks.

When you open this HTML file in a web browser, you will see the custom quotation marks applied to the content within the <blockquote> element. This demonstrates how the quotes property can be used to customize the appearance of quotation marks in your web page.

The “quotes” property provides flexibility in customizing the appearance of quotations to match various languages and design preferences in web typography.