CSS quotes Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The quotes property in CSS is used to define the type of quotation marks to be used for the content property in pseudo-elements like ::before and ::after.

This property allows you to specify which quotation marks should be used for nested quotations, providing greater control over the typography and style of your text content.

💡 Syntax

The syntax for the quotes property involves specifying a list of pairs of opening and closing quotes.

Syntax

Copied

element {
  quotes: none | [open-quote close-quote] [open-quote close-quote]*;
}

🎛️ Default Value

The default value of the quotes property is dependent on the browser's default settings, which typically use standard quotation marks for the language of the document.

🏠 Property Values

Value	Description
none	No quotes will be used.
[open-quote close-quote]	Specifies pairs of opening and closing quotes for different levels of quotation.

📄 Example

In this example, we'll define custom quotes for blockquotes and nested quotes.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS quotes Property Example</title>
  <style>
    blockquote {
      quotes: "“" "”" "‘" "’";
    }
    blockquote::before {
      content: open-quote;
    }
    blockquote::after {
      content: close-quote;
    }
    blockquote q::before {
      content: open-quote;
    }
    blockquote q::after {
      content: close-quote;
    }
  </style>
</head>
<body>
  <h1>Blockquote with Custom Quotes</h1>
  <blockquote>
    This is a blockquote with custom quotes.
    <q>This is a nested quote within the blockquote.</q>
  </blockquote>
</body>
</html>

🖥️ Browser Compatibility

The quotes property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The quotes property in CSS is a useful tool for controlling the appearance of quotation marks in your web content.

By defining custom quotes, you can enhance the readability and aesthetic appeal of your text, especially when dealing with nested quotations. Experiment with different styles and see how this property can improve the typography of your web projects.