CSS Quotes: Syntax, Usage, and Examples

The CSS quotes property allows developers to define the type of quotation marks used when rendering content from the HTML <q> tag. By default, browsers apply language-appropriate quotation marks to the <q> element, but with CSS quotes, you can override these defaults to match your design, language, or stylistic preferences. Understanding how to use quotes in CSS can help you create a more polished and localized user experience, particularly on multilingual websites or those with custom branding requirements.

How CSS Quotes Work

The CSS quotes property controls the quotation marks that appear before and after content generated with the <q> element. It takes a list of paired strings, with each pair defining an opening and closing quote. These pairs can be used for nested quotations as well.

Basic Syntax

quotes: "open-quote" "close-quote" "open-nested-quote" "close-nested-quote";

For example:

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

This declaration tells the browser to use curly quotation marks for top-level quotes and single curly quotes for nested quotes.

You can use the quotes property in any CSS rule where the <q> element is targeted, or even in pseudo-elements that use content: open-quote or content: close-quote.

When to Use the CSS Quotes Property

The default quote marks that browsers apply may not always align with the tone, branding, or localization requirements of your site. The quotes CSS property becomes useful when you need to:

1. Match a Specific Language or Locale

Some languages use different symbols for quotations. For instance:

• English: “double” and ‘single’
• French: « guillemets »
• German: „quotes“
• Japanese: 「kagikakko」

You can use the quotes property to reflect these standards accurately.

html[lang="fr"] q {
  quotes: "« " " »";
}

This ensures the quotation marks in your French-language content conform to French typographic norms.

2. Customize the Style for Branding

Custom design systems might prefer a stylized approach to quotation marks that departs from typographic defaults. You can override the default quotes in CSS to reflect your brand’s tone or visual identity.

q {
  quotes: ">>" "<<";
}

This might be used in futuristic or stylized designs where conventional quote marks don’t align with the overall theme.

3. Ensure Consistency Across Browsers

Different browsers and operating systems might render default quotes differently. Using the CSS quotes property lets you standardize the appearance across all platforms, eliminating inconsistencies in your site's typography.

Default Behavior Without CSS Quotes

By default, browsers use built-in quotation mark styles based on the lang attribute of the HTML document or element. This means <q> elements are rendered with localized quotes, depending on the language context.

<p lang="en"><q>This is a quote.</q></p>
<p lang="de"><q>Das ist ein Zitat.</q></p>

In this case, the English version will likely use “double quotes,” while the German version will display „inverted quotes“.

However, if you don’t explicitly add a language or customize the quotes CSS property, your users may experience inconsistent formatting depending on their browser or device.

Examples of Quotes in CSS

Example 1: Standard Double and Single Quotes

q {
  quotes: '"' '"' "'" "'";
}

This sets the first-level quotes to double marks and the second-level (nested) quotes to single marks.

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

This will render as:

“This is a ‘nested’ quote.”

Example 2: French Guillemet Style

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

This follows French typographic standards and supports nesting.

Example 3: Japanese Brackets

q {
  quotes: "「" "」" "『" "』";
}

This is suitable for Japanese content, supporting primary and nested quotations with traditional brackets.

Example 4: Removing Quotes Altogether

Sometimes, you may want to remove quotation marks completely and handle them manually via HTML or design.

q {
  quotes: none;
}

This prevents browsers from inserting any quote marks around <q> elements.

Using Open-Quote and Close-Quote with Pseudo-Elements

Beyond styling the <q> tag, you can manually insert quotes using CSS pseudo-elements with content: open-quote and content: close-quote.

Example

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}
blockquote {
  quotes: "“" "”";
}

<blockquote>This is quoted text.</blockquote>

This approach is particularly useful when you want full control over where quotation marks appear, and it allows you to use elements other than <q>.

Nesting Levels with Quotes CSS

CSS allows you to define multiple pairs of quote styles for different nesting levels. The browser applies each pair based on how deeply the <q> elements are nested.

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

Then, HTML like this:

<q>This is a <q>nested <q>deep</q> level</q> quote.</q>

Will display as:

“This is a ‘nested <> level’ quote.”

The order of the pairs matters. Each nested level picks the next available pair of open and close quote strings.

Best Practices for Using Quotes in CSS

1. Always account for nesting: If your content may include nested quotes, define at least two levels of quote pairs.
2. Match language with design: Use language-specific quotes to enhance readability and localization.
3. Use lang attributes: Combine language attributes in HTML with CSS rules for fine-grained control.
4. Avoid empty quotes: If you remove quotes with quotes: none, ensure alternative visual cues are provided to readers.
5. Test across browsers: Verify that your quotes render properly on Chrome, Firefox, Safari, and Edge.

Accessibility and the CSS Quotes Property

Using the <q> tag in combination with the quotes property ensures that quotation semantics are preserved for screen readers and other assistive technologies. Unlike using hard-coded quotation marks in plain text, the <q> tag:

• Allows screen readers to announce "quote" and "end quote"
• Enables visual quote styling without altering the content structure
• Can adapt dynamically to language and locale settings

This reinforces the importance of semantic HTML combined with stylistic control via quotes CSS.

Internationalization Considerations

When building a multilingual website, it’s crucial to ensure that quotes are culturally and linguistically appropriate. The combination of the lang attribute in HTML and quotes in CSS allows you to target language-specific typographic conventions.

Example

html[lang="en"] q {
  quotes: "“" "”" "‘" "’";
}

html[lang="de"] q {
  quotes: "„" "“" "‚" "‘";
}

html[lang="ja"] q {
  quotes: "「" "」" "『" "』";
}

By localizing your styles in this way, you improve both readability and user experience.

Compatibility and Browser Support

The CSS quotes property enjoys excellent support across all major browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera

However, always test nested quote rendering and fallback behaviors, especially when using complex quote sets or when working with pseudo-elements like content: open-quote.

Summary

The CSS quotes property offers powerful control over the appearance of quotation marks in HTML documents. Whether you're building a multilingual blog, creating a custom theme for your brand, or designing an accessible educational platform, understanding how to use quotes in CSS properly is essential.

It enables you to replace default quote styles with custom or language-specific ones, ensuring a better experience for all users. You can define quote pairs, nest them to multiple levels, and even remove them entirely when needed.

By combining semantic HTML with careful CSS styling, quotes in CSS help you strike the right balance between functionality, accessibility, and design.