HTML-CSS: Stylized quotation marks

Last update on June 16 2025 13:03:04 (UTC/GMT +8 hours)

HTML-CSS : Exercise-42 with Solution

Using HTML, CSS customizes the style of inline quotation marks.

Use the quotes property to customize the characters used for the opening and closing quotes of a <q> element.

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS customizes the style of inline quotation marks</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<p><!-- Comment: Defines a paragraph -->
<q>HTML, CSS Practical.</q> – Exercises <!-- Comment: Adds a quoted text and a citation -->
</p>
</body>
</html><!-- Comment: End of the HTML document -->

Explanation:

HTML:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Indicates the start of the HTML document.
<head>: Contains meta-information about the HTML document.

<meta charset="utf-8">: Declares the character encoding for the document.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the width of the device.
<title>: Sets the title of the document.

<body>: Contains the content of the HTML document.
- <p>: Defines a paragraph.
  - <q>: Inserts a quotation.
    - Text inside <q>: The quoted text.
  - Text outside <q>: Citation for the quotation.

CSS Code:

q {
  quotes: "“" "”"; /* Comment: Defines custom quotation marks for the <q> element */
}

Explanation:

CSS:

q: Targets the <q> element.

quotes: "“" "”";: Specifies custom quotation marks for the <q> element. In this case, it sets the opening and closing quotation marks as double curved quotes.

Go to:

PREV : Reset all styles.
NEXT : Truncate multiline text.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.