The quotes property defines the quotation marks that the user agent and CSS generated content will insert for quoted text and nested quotations. Instead of relying on a browser’s default quotation characters, authors can supply a language- or typographic-specific sequence of opening/closing mark pairs to be used for successive levels of nesting. This makes it possible to adapt the visual appearance of quotations to regional conventions (for example, single vs. double marks, angle quotes, or other glyphs) without changing the actual textual content.

When the property is present, those mark pairs are consumed by the mechanisms that insert quotation marks automatically - most commonly the browser’s default styling for the inline quote element and any generated content that requests quote marks via the appropriate generated-content keywords. For that insertion to happen authors normally rely on the content mechanism (often used in pseudo-elements) or leave the default UA styling in place; the quotes property itself simply supplies the strings to be used. Because the property supplies a sequence of pairs, it defines what appears at each nested quotation level; if a document nests deeper than the number of supplied pairs, user-agent fallback rules determine the marks used.

From a stylesheet-design perspective, quotes is inherited and so can be set on a root element and flow naturally to descendants, which is useful for pages or sections that need consistent quoting conventions. It does not change the semantics of the markup - screen readers and other assistive technologies treat quoted content according to semantics rather than visual marks - so authors should not rely on visual quotation marks alone for meaning. Also consider writing direction: when text direction changes, the visual ordering and choice of marks may need to reflect right-to-left conventions, so coordinate quotes with document directionality (see direction) and typographic practice to ensure quotations read correctly.