CSS

CSS

🎯 What is CSS quotes?

The CSS quotes property defines which quotation marks are used for the HTML <q> (quote) element. It allows you to override the browser’s default quotation style and customize it based on language, design system, or UI requirements.

For example, English quotes often use “ ”, while French typography uses « ». The quotes property makes this customization easy and flexible.

🔹 Basic Usage

CSS

q { 
    quotes: "“" "”" "‘" "’"; 
}

📌 In this example:

  • "“" → Opening double quote
  • "”" → Closing double quote
  • "‘" → Opening single quote (nested quotes)
  • "’" → Closing single quote (nested quotes)

📝 HTML Example

CSS

<p> This is a <q> sample quote </q>.</p>

👀 Output

CSS

This is a “sample quote”.

💡 The browser automatically wraps the text inside <q> with the defined quotation marks.

📚 CSS quotes Values

🧩 Examples

1️⃣ none

🚫 Removes quotation marks completely.

CSS

q { 
    quotes: none; 
}

📌 Result: No quotation marks are displayed around the text, even if <q> is used.

2️⃣ Custom String Values

🎨 You can define any custom quotation style.

CSS

q { 
    quotes: "«" "»"; 
}

📌 This style is commonly used in French and several European languages.

👀 Output

«Sample Quote»

3️⃣ initial

🔄 Resets the property to the browser’s default quotation style.

CSS

q { 
    quotes: initial; 
}

📌 Most browsers default to “ ” style quotation marks.

4️⃣ inherit

📥 Inherits the quotes value from the parent element.

CSS

q { 
    quotes: inherit; 
}

📌 Useful for maintaining consistent quotation styling across large projects.

🚀 When to Use CSS quotes?

The quotes property is especially useful in the following cases:

  • Supporting multilingual typography styles
  • Matching brand or design system guidelines
  • Creating styled quotes in blogs and news websites
  • Improving readability of nested quotations
  • Enhancing UI consistency across components

⭐ Benefits of CSS quotes

  • Improves the visual quality of quotations
  • Supports international typography standards
  • Handles nested quotes automatically
  • Gives full control over quote styling
  • Enhances content readability and design consistency

📌 Summary

The CSS quotes property allows you to fully customize quotation marks used in the HTML <q> element. You can define your own symbols, remove quotes entirely, or rely on browser defaults.

🌍 It is especially useful for multilingual websites, blogs, news platforms, and modern UI design systems where typography consistency matters.

CSS content
CSS font-size