CSS `quotes` Property: Customizing Quotation Marks in Your Web Designs
Learn how to customize quotation marks in your CSS stylesheets using the `quotes` property. This tutorial explains how to specify different types of quotation marks (single, double, etc.) and provides examples of using the `quotes` property in conjunction with the `content` property for enhanced typographic control.
Understanding the CSS `quotes` Property
The CSS quotes property controls the type of quotation marks used in your text. It works in conjunction with the `content` property's `open-quote` and `close-quote` values.
Syntax and Values
The syntax is as follows:
quotes: none | string | initial;
Value Breakdown:
none: This is the default. It prevents `open-quote` and `close-quote` from generating any quotation marks.string: Specifies the quotation marks to use. The string is a series of quote pairs. The first pair is for the outermost quotes, the second for the next level of nested quotes, and so on.initial: Resets the property to its default value (none).
Quotation Mark Characters
Here's a table of common quotation mark characters and their entity numbers:
| Description | Character | Entity Number |
|---|---|---|
| Double quote | " | \0022 |
| Single quote | ' | \0027 |
| Double quote (double low-9) | „ | \201E |
| Double, left angle quote | « | \00AB |
| Double, right angle quote | » | \00BB |
| Single, left angle quote | ‹ | \2039 |
| Single, right angle quote | › | \203A |
| Left quote (single high-6) | ‘ | \2018 |
| Right quote (single high-9) | ’ | \2019 |
| Left quote (double high-6) | “ | \201C |
| Right quote (double high-9) | ” | \201D |
Examples
Example 1: Using `none`
This example demonstrates using the none value. The quotation marks won't appear even if you use the `content` property's `open-quote` and `close-quote`.
CSS
quotes: none;
Example 2: Using `string`
This example shows how to customize the quotation marks using the `string` value. (Note: The output below is a simplification and may require additional CSS and HTML to accurately replicate using the content property.)
CSS
quotes: "“ ” ‘ ’";
Example 3: Using the `:lang` Pseudo-class
The :lang pseudo-class can be used to change quotation marks based on language. This example demonstrates this capability. (Again, a simplified representation; actual implementation uses the `content` property.)
CSS (Illustrative)
q:lang(en) { quotes: "“ ” ‘ ’"; }
q:lang(fr) { quotes: "« » ‹ ›"; }