---
title: "CSS -Quotes"
url: https://khanwaseem.com/blog/course/css-quotes
author: "khan Waseem"
published: 2023-09-16
updated: 2023-09-16
topics: ["course", "CSS Tutorial"]
description: "Explore different quotation mark characters, from straight quotes to curly and language-specific marks, used to indicate quoted speech in written content."
---

# 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:

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

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

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

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

- **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:

```css
   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.

- **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.

```css
   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:

```xml
<!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 : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/16141043/image-117.png)

**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.

### Related posts:

[CSS – Pseudo Classes](https://blog.khanwaseem.com/css-pseudo-classes/)
[HTML – Phrase Tags](https://blog.khanwaseem.com/html-phrase-tags/)
[CSS – Pseudo Elements](https://blog.khanwaseem.com/css-pseudo-elements/)
[CSS – Text](https://blog.khanwaseem.com/css-text/)

Powered by [YARPP](https://yarpp.com).