Open In App

How to set the marks for quotations in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to set the quotation marks for quotations in CSS. Quotation marks [” “] is used to set off material that represents quoted or spoken language and quotes are the CSS quotes property to set the types of quotation marks for quotations. Define pairs of opening and closing quotation marks with the content property. For example quotes: “«” “»”;. Apply the quotes property to the element containing the quoted text using content: open-quote; and content: close-quote; respectively.

Approach: Firstly create the HTML page with a paragraph element then with the help of the <q> element provide a quotation mark at the appropriate place.

Syntax:

quotes:values;

Quotation Mark:

Entity Number Name Output
\0022 double-quote     “
 \0027 single-quote     ‘
\2039 single, left angle quote     <
\203A single, right angle quote     >
 \00AB double, left angle quote    <<
\00BB double, right angle quote    >>
\2018 left quote (single high-6)     ‘
\2019 right quote (single high-9)     ’
\201C left quote (double high-6)     “
\201D right quote (double high-9)     ”
\201E double quote (double low-9)     ”

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-size: 25px;
        }
 
        #a {
            quotes: "'" "'";
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <p><q id="a">
            A computer science portal for geeks
        </q>
    </p>
</body>
</html>


Output:


Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads