CSS Properties: How to specify the quotation marks for quotations?

Last update on February 24 2024 12:26:59 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify the quotation marks for quotations</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
q { /* Styles all q elements */
    quotes: "«" "»" "‹" "›"; /* Sets custom quotation marks for the q elements */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p><q>w3resource Tutorial</q></p><!-- Displays a paragraph with a q element and custom quotation marks -->
<p><q>w3resource <q>web development</q> tutorial.</q></p><!-- Displays a paragraph with nested q elements and custom quotation marks -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document demonstrates how to specify custom quotation marks for <q> elements using CSS.
CSS comments are added to explain each section of the code.
The CSS selector q targets all <q> elements in the document.
The quotes property specifies the quotation marks used for the content of the <q> elements.
Four values are provided for quotes, each representing the opening and closing marks for primary and secondary quotations.
In this example, the custom quotation marks are: "«" for the opening primary quote, "»" for the closing primary quote, "‹" for the opening secondary quote, and "›" for the closing secondary quote.

Live Demo :

See the Pen quotes-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page