CSS Quotes

CSS quotes are used to style the opening and closing quotation marks around text in an HTML document. This can be particularly useful when dealing with blockquotes or quoted text, allowing for customization of the type, style, or position of quotation marks.

Syntax

The quotes property in CSS allows you to define the types of quotation marks to use in a nested structure.

quotes: 'opening-quote' 'closing-quote' 'nested-opening-quote' 'nested-closing-quote';

Try It Now

Default Behavior

By default, browsers automatically apply quotation marks based on the language and locale settings. However, you can override these defaults using the quotes property.

Example

Here is a simple example to demonstrate how to use the quotes property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        blockquote {
            quotes: "«" "»" "‹" "›";
        }

        blockquote:before {
            content: open-quote;
        }

        blockquote:after {
            content: close-quote;
        }

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

        q:before {
            content: open-quote;
        }

        q:after {
            content: close-quote;
        }
    </style>
</head>
<body>
    <blockquote>
        This is a blockquote. Inside it, we can have a <q>quoted text</q>.
    </blockquote>
</body>
</html>

Try It Now

Explanation

  1. blockquote Styling:
    • The quotes property is set to use « and » for the main blockquote and ‹ and › for nested quotes.
    • blockquote:before and blockquote:after are used to insert the opening and closing quotes automatically around the blockquote content.
  2. q Styling:
    • The quotes property for q elements uses “ and ” for quotes, and ‘ and ’ for nested quotes.
    • Similarly, q:before and q:after insert the quotes around the inline quoted content.

Customization

You can use any symbols or characters as quotes, which allows for a wide range of stylistic choices, such as:

  • Double quotes (" ")
  • Single quotes (' ')
  • Guillemets (« »)
  • Custom symbols (❝ ❞)

Browser Support

Most modern browsers support the quotes property, but it is always good to test your styles across different browsers to ensure compatibility.

By using CSS quotes, you can give your web content a more polished and customized appearance, especially when dealing with various levels of nested quotations.