Adding Quotations using CSS

Lang selector let us do more then just font-size and color which we did few articles back. Placing quotations using lang selector is what we will focus in this article.

1
2
3

q:lang(en) {
}

Quotation will be taken from the font type we define in lang selector here we picked en.

1
2
3
4
5

q:lang(en) {
             quotes: "«" "»";
}

We have given the quotes property the argument to place double arrow braces.

1
2
3
4
5

q:lang(en) {
             quotes: "«" "»" "'" "'";
}

We can define sub quotations as well, like placing the quotation inside quotation. For it we need to define two extra arguments like we did above.

Example:

1
2
3
4
5
6
7
8
9

<style>
q:lang(en) {
             quotes: "«" "»" "'" "'";
}</style>
<p><q>Quotations can be placed inside another <q>Quotation</q> like this</q></p>

Where the code block is:

1
2
3
4
5
6
7
8
9

<style>
q:lang(en) {
             quotes: "«" "»" "'" "'";
}</style>
<p><q>Quotations can be placed inside another <q>Quotation</q> like this</q></p>

Related posts

• Styling Visited Links With CSS
• Working with CSS Backgrounds
• Styling Borders With CSS
• Pure CSS Image Flip
• Fixed Header With CSS
• Can We Open a Link in New Window With CSS?
• Using CSS Generic Classes
• Rowspans and Colspans in CSS
• Shorthand in CSS (Border, Outline, Color, Multi Deceleration)
• Separate CSS for PDAs and Mobile Devices