How to set the marks for quotations in CSS ?
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" > w3wiki </ h1 > < p >< q id = "a" > A computer science portal for Beginner </ q > </ p > </ body > </ html > |
Output: